通过 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 以便我可以连接模态吗？

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

通过 Angular2 Dart 访问 dom

Get access to dom via Angular2 Dart

dart

bootjack

angular