通过 Angular2 Dart 访问 dom答案

【问题标题】：Get access to dom via Angular2 Dart通过 Angular2 Dart 访问 dom
【发布时间】：2017-01-28 13:42:24
【问题描述】：

我正在尝试访问 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 中连接吗？

【问题讨论】：

标签： angular dart bootjack

【解决方案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);
  });
}

【讨论】：

很高兴听到:)