通过Angular2 Dart访问dom

发布时间：2020-12-17 17:28:02 所属栏目：安全来源：网络整理

导读：我正在尝试访问Angular2 Dart项目中的DOM,因为我使用的是不兼容Angular2的GUI库. 从按钮单击事件调用时,以下代码100％工作： Modal.use();Modal carriersModal = new Modal(querySelector("div.select-carrier-modal"));carriersModal.show(); 我现在想要访

我正在尝试访问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);打印出选择载体.如果我对它执行this._el.nativeElement.querySelector,无论我放在那里,结果都是null.如果我调用this._el.nativeElement.children,我会得到一个空列表.

奇怪的是,调用新的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吗？

解决方法

我假设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);
  });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!