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

我关闭了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(...);
  });
}

将组件添加到dom时的事件

1 个答案: