Question

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

e.g。我天真地期望能够做到这样的事情：

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

但我也试过使用innerHTML

简单地将包含我的自定义元素的HTML追加到元素中

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

使用document.createElement（）

创建元素

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

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

感谢，专利

Answer 1

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

但是，这不是“Angular方式”。

相反，请将模板写为

<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结构。

Angular.Dart如何动态地将组件添加到DOM？

1 个答案: