2017-01-28 8 views
4

私はAngular2互換ではないGUIライブラリを使用しているので、Angular2 DartプロジェクトでDOMにアクセスしようとしています。Angular2ダート経由でdomにアクセス

次のコードは、ボタンクリックイベントから呼び出されたときに100%の作品:私は今、その同じDOMにアクセスしたい

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

ますが、そのコンポーネントの内部パッケージ:インサイド

@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(); 

    }  
} 

angle2コンポーネント、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); 

は単に私がモーダルに配線できるように、コンポーネント内部からDOMへのアクセスを取得する方法

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

任意のアイデア出力しますか?

答えて

5

コンテンツを作成するのにGUIライブラリに時間がかかっていて、ngAfterContentInit()が呼び出されたときにGUIライブラリがまだ使用できないと仮定します。これはうまくいくかもしれない

@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); 
    }); 
} 
+0

働き、感謝ギュンター! –

+0

嬉しいです:) –

関連する問題