通过Angular2 Dart访问dom

Question

我试图访问Angular2 Dart项目中的DOM，因为我使用的是不与Angular2兼容的GUI库。

下面的代码工作从一个按钮单击事件调用时100％：

Modal.use(); 
Modal carriersModal = new Modal(querySelector("div.select-carrier-modal")); 
carriersModal.show(); 

我现在要访问相同的DOM，但包一个组件内：

@Component(
    selector: 'select-carrier', 
    templateUrl: '../templates/select-carrier-component.html' 
) 
class SelectCarrierComponent implements AfterContentInit { 

    ElementRef _el; 

    SelectCarrierComponent(ElementRef el){ 
     this._el = el; 
    } 

    @override 
    ngAfterContentInit() { 
     Modal.use(); 
     Modal carriersModal = new Modal(this._el.nativeElement.querySelector("div.select-carrier-modal")); 
     carriersModal.show(); 

    }  
} 

里面的angular2组件，print(this._el.nativeElement);打印出select-carrier。如果我对它做this._el.nativeElement.querySelector，结果是null无论我放在那里。如果我拨打this._el.nativeElement.children，我会得到一个空白列表。

奇怪的是，调用new Modal(querySelector("div.select-carrier-modal")).show();仍然工作时，通过另一个组件按钮点击调用，但我不能让它从组件内部工作。

@override 
ngAfterContentInit() { 

    print(querySelector("div.select-carrier-modal")); 
    print((this._el.nativeElement as Element).innerHtml); 
    print((this._el.nativeElement as Element).children); 
    print((this._el.nativeElement as Element).nodes); 

只需打印出

null 
<!--template bindings={}--> 
[] 
[template bindings={}] 

任何想法，我是怎么从组件，这样我可以在模态主线圈内访问DOM？

Answer 1

我假设GUI库需要更多时间来创建内容，并且在调用ngAfterContentInit()时它还不可用。

这可能会实现：

@override 
ngAfterContentInit() { 
    new Future.delayed(Duration.Zero,() { 
    print(querySelector("div.select-carrier-modal")); 
    print((this._el.nativeElement as Element).innerHtml); 
    print((this._el.nativeElement as Element).children); 
    print((this._el.nativeElement as Element).nodes); 
    }); 
}