dart - 将组件添加到dom中时发生的事件

Question

假设我有一个AngularDart组件，该组件将div和iframe添加到该div作为模板。

我在组件构造函数中为外部组件传递了元素

@Component(
    selector: "input-html",
    templateUrl: "packages/myproject/components/inputs/html.html",
    useShadowDom: false
)
class HtmlComponent implements ShadowRootAware {

    HtmlComponent(NgModel ngModel, Element element):super(ngModel, element){
    } 
}

我已关闭阴影功能，因为我正在使用Bootstrap进行样式设置，并希望Bootstrap CSS可以轻松访问元素。

我的模板代码遵循

 <div>
      <iframe id="my-iframe"></iframe>
 </div>

比这更复杂的是，有一堆按钮等，因为我正在将javascript html编辑器移植到angulardart。

我的问题是，我需要获取iframe元素，但是每当查询element.querySelector(“＃my-iframe”)或什至window.document.querySelector(“＃my-iframe”)时，该对象都是null。我相信这是因为尚未将模板添加到DOM中。

我需要iframe对象，因为我需要设置iframe内容才能使HTML编辑器正常工作。我项目的其他一些 Realm 我想获取模板dom对象，但不能。

我尝试过onShadowRoot，它在AngularDart 0.14中可用，但在1.0中不再可用。我尝试过ScopeAware并在设置范围时查询iframe，但这没有用(ScopeAware在shadowroot事件之前触发)。

通过使用ng-show =“init()”，我有一个杂乱的工作原理，在这种init方法中，

bool _initDone = false;
bool init() { 
    if(_initDone == false) {
        iframe = element.querySelector("#my-iframe")
        _initDone = true;
    }
    return true;
}

哪个可行，但是很困惑，我不喜欢这种解决方案，显然这不是正确的方法。

有人知道我如何在AngularDart 1.0中实现吗？

Answer 1

我认为onShadowRoot是代码查询元素的正确位置。如果确实不起作用，则将其包装在Future中，以将其添加为事件队列末尾的任务，以使其延迟更多。

onShadowRoot() {
  new Future(() {
    querySelector(...);
  });
}