5

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

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

谢谢，帕特

4

1 回答 1

1

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

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

相反，将您的模板编写为

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

此处，仅当为 truemy-component时才会被创建并包含在 DOM中。should_component_be_displayed

my-holder可以删除 div，从而使 DOM 结构更清晰。

于 2013-12-07T23:30:55.740 回答