Я хотел бы динамически построить дерево компонентов на основе некоторой информации, полученной от вызовов 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>");
}
}
Обновление: мне удалось правильно отобразить внутренний компонент следующим образом, но я все еще не уверен, что это правильный способ:
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]);
}
}
document.body.appendHtml('<my-comp></my-comp>')
, как бы вы тогда получили angular, чтобы скомпилировать это? - person Daniel Robinson   schedule 27.04.2014