小编Mic*_*ski的帖子

我想基于从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]); 
  }

}