Zugriff auf dom über Angular2 Dart

Question

Ich versuche, in einem Angular2 Dart-Projekt Zugriff auf das DOM zu bekommen, da ich eine GUI-Bibliothek verwende, die nicht Angular2-kompatibel ist.

Der folgende Code funktioniert 100%, wenn aus einem Button-Klick-Ereignisse aufgerufen:

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

ich jetzt zugreifen mag, dass die gleichen DOM, aber Paket, das in einer Komponente:

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

    }  
} 

Inside the angular2-Komponente, print(this._el.nativeElement); druckt aus. Wenn ich this._el.nativeElement.querySelector darauf mache, ist das Ergebnis null egal was ich da reinlege. Wenn ich this._el.nativeElement.children rufe, bekomme ich eine leere Liste.

Seltsame Sache ist, ruft new Modal(querySelector("div.select-carrier-modal")).show(); funktioniert immer noch, wenn von einer Schaltfläche klicken über eine andere Komponente aufgerufen, aber ich kann es nicht von innerhalb der Komponente zu arbeiten.

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

einfach ausdruckt

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

Jede Idee, wie ich Zugriff auf das DOM erhalten aus dem Inneren des Bauteils, so dass ich in der Modal Draht kann?

Answer 1

Ich nehme an, die GUI-Bibliothek benötigt mehr Zeit, um den Inhalt zu erstellen, und es ist noch nicht verfügbar, wenn ngAfterContentInit() aufgerufen wird.

Dies könnte funktionieren:

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