4

我正在尝试访问 Angular2 Dart 项目中的 DOM，因为我使用的 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();

    }    
}

在 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 吗？

4

1 回答 1

5

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);
  });
}
于 2017-01-28T13:50:26.063 回答