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

Question

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

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

@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){
    } 
}

我关闭了 Shadowdom，因为我使用 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 编辑器正常工作。我项目的其他一些区域我想要获取模板 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(...);
  });
}