Я хотел бы динамически построить дерево компонентов на основе некоторой информации, полученной от вызовов 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]); 
  }

}