Angular.Dart Как динамически добавлять компонент в DOM?

Question

У меня есть собственный @NgComponent в моем проекте, и он работает, если я помещаю его в статический HTML-код приложения. Я пытаюсь выяснить, как добавить динамическое динамическое расширение DOM? Если я создам экземпляр моего Компонента, он, похоже, не имеет типа 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); 

Но компонент, похоже, не реализуется при добавлении.

спасибо, Pat

Answer 1

Вы можете добавлять компоненты динамически, но вы должны вручную вызвать Угловой компилятор так он замечает, что innerHTML имеет компонент, встроенный в него.

Однако это не «Угловой способ».

Вместо написать шаблон как

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

Здесь my-component будут созданы и включены в DOM только если should_component_be_displayed верно.

my-holder div может быть удален, что приводит к улучшению структуры DOM.