通過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); 
    }); 
}