通过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以便我可以连接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);
  });
}