Я хотел бы динамически строить дерево компонентов, основываясь на некоторой информации, полученной от вызовов AJAX.
Как программно добавить компонент в DOM из другого компонента? У меня есть <outer-comp>
, и я хотел бы, основываясь на некоторой логике, вставить <inner-comp>
. Следующий код просто вставляет элементы <inner-comp></inner-comp>
в DOM, а не фактическое представление <inner-comp>
.
@NgComponent(
selector: 'outer-comp',
templateUrl: 'view/outer_component.html',
cssUrl: 'view/outer_component.css',
publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
}
}
Update: Мне удалось сделать внутренний компонент правильно следующим образом, но я все еще не уверен, что это правильный способ:
class AppComponent extends NgShadowRootAware {
Compiler compiler;
Injector injector;
AppComponent(this.compiler, this.injector);
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
BlockFactory template = compiler(inner.nodes);
var block = template(injector);
inner.replaceWith(block.elements[0]);
}
}