将组件添加到dom时的事件-Java 学习之路

假设我有一个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对象，因为我需要为HTML编辑器设置iframe内容才能工作 . 我的项目还有一些其他领域我想获得模板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中实现这一目标？

1 回答

2
我认为 onShadowRoot 是代码查询元素的正确位置 . 如果它真的不起作用将它包装在 Future 中，将它作为任务添加到事件队列的末尾，以使其延迟一点 .
```
onShadowRoot() {
  new Future(() {
    querySelector(...);
  });
}
```
回复于 2024-05-07T02:32:45+08:00

将组件添加到dom时的事件

1 回答

相关问题