Angular.Dart如何動態地將組件添加到DOM？

Question

我的項目中有一個自定義的@NgComponent，如果我將它放在應用程序的靜態HTML中，它就可以工作。 我想弄清楚的是如何動態地向DOM添加一個？ 如果我構造我的Component的一個實例，它似乎不是Element類型，因此它不能直接添加到DOM中元素的子元素。 是否有另一種方法來構造我的組件或將其包裝以便注入DOM？

例如，我天真地期望能夠做類似的事情：

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中嵌入了一個組件。

然而，這不是“角度方式”。

相反，將您的模板寫為

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

這里，只有當should_component_be_displayed為true時，才會創建my-component並將其包含在DOM中。

可以移除my-holder div，從而形成更清晰的DOM結構。