Получить доступ к dom через Angular2 Dart

Question

Я пытаюсь получить доступ к DOM в проекте Angular2 Dart, так как я использую библиотеку GUI, которая не совместима с Angular2.

Следующий код работает 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(); 

    }  
} 

Внутри угловой2 компонент, 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 внутри компонента, так что я могу провод в Modal?

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