Chciałbym dynamicznie budować drzewo komponentów w oparciu o pewne informacje otrzymane z wywołań AJAX.

Jak programowo dodać komponent do DOM z wnętrza innego komponentu? mam<outer-comp> i chciałbym, bazując na pewnej logice, wstawić<inner-comp>. Poniższy kod po prostu wstawia elementy<inner-comp></inner-comp> do DOM, a nie rzeczywisty<inner-comp> reprezentacja.

@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>");
  }
}

Aktualizacja: Udało mi się poprawnie renderować wewnętrzny komponent w następujący sposób, ale nadal nie jestem pewien, czy jest to właściwy sposób:

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]); 
  }

}