dart - Angular.Dart 如何将组件动态添加到 DOM?

标签 dart angular-dart

我的项目中有一个自定义的@NgComponent,如果我将它放在应用程序的静态 HTML 中,它就可以工作。我想弄清楚的是如何动态地向 DOM 添加一个?如果我构造我的 Component 的实例,它似乎不是 Element 类型,因此它不能直接添加到 DOM 中元素的子元素。是否有另一种方法来构建我的组件或将其包装以注入(inject) DOM?

例如我天真地期望能够做类似的事情:

dom.Element holderEl = dom.document.querySelector("#my-holder");
holderEl.children.add( new MyComponent() ); 

但我也尝试过简单地将包含我的自定义元素的 HTML 附加到使用 innerHTML 的元素

holder.innerHtml="<my-component></my-component>"

并使用 document.createElement() 创建元素

dom.Element el = dom.document.createElement("my-component");
dom.document.body.append(el);

但是该组件在添加时似乎没有实现。

谢谢,

最佳答案

您可以动态添加组件,但您必须手动调用 Angular 编译器,以便它注意到 innerHTML 中嵌入了一个组件。

但是,这不是“角度方式”。

相反,将您的模板编写为

<div id="my-holder">
  <my-component ng-if="should_component_be_displayed"></my-component>
</div>

在这里,my-component仅当 should_component_be_displayed 时才会创建并包含在 DOM 中是真的。
my-holder div 可以被删除,这会导致更干净的 DOM 结构。

关于dart - Angular.Dart 如何将组件动态添加到 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20058053/

相关文章:

dart - 如何在AngularDart中定义全局模板变量

dart - 如何自定义角度 Dart 中的元素

javascript - 我们用 Dart 来编写 Angulardart 代码吗?

android - 如何在 flutter 应用程序中使用外部 USB 摄像头?

Flutter RootRestorationScope 不恢复最后一个根

dart - 如何在 flutter 中做 widget 的下拉动画?

dart - Flutter - 找不到 'Window_sendPlatformMessage'(4 个参数)

gridview - Flutter:在 GridView 的 Tile 中使用 GestureDetector 进行点击延迟

dart - 如何在AngularDart组件的更改回调中获取选定的选项

dart - 使用 dart web 应用程序 http 时获取/设置 cookie