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={}]

只需打印

for hashtag in hashtags: 
    existing_hashtag = hashtags_collection.find({"string": hashtag}).limit(1)
    if existing_hashtag:
        hashtags_collection.update({"string": hashtag}, 
                                   {"$inc": {"popularity": 1}})                                                      
    else:
        new_hashtag = {"string": hashtag,
                       "popularity": 1}
        hashtags_collection.insert_one(new_hashtag)

知道如何从组件内部访问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);
  });
}

通过Angular2 Dart访问dom

1 个答案: