Angular 2 在不使用 ViewContainerRef 的情况下将组件动态插入到特定的 DOM 节点中

Question

我对 Angular 2 rc5 中的动态组件创建有疑问。

那么让我们假设我们有两个普通的 Angular 分量:

  @Component({
      template: `
        <div id="container">
          <h1>My Component</h1>
        </div>
       `,
      selector: 'my-app'
  })
  export class AppComponent { }

  @Component({
      template: '<p>{{text}}</p>',
      selector: 'simple-cmp'
  })
  export class SimpleComponent { public text='Hello World!' }

然后一些外部非 Angular 代码块修改 DOM:

let newNode = document.createElement('div');
newNode.id = 'placeholder';
document.getElementById('container').appendChild(newNode);

这是经过操作后的一些推测树:

 <div id="container">
      <h1>My Component</h1>
      <div id="placeholder"></div>
 </div>

所以我要做的就是将 SimpleComoponent 实例动态添加到#placeholder div 中。我怎样才能达到这个结果？

我一直在尝试使用 ComponentFactory.createComponent(injector, [], newNode)，虽然它添加了组件，但生命周期 Hook 和绑定(bind)都不起作用。

我相信有一些方法可以使用 ViewContainerRef 来实现它，但我如何才能将它与动态创建的节点链接起来？

这是我期望的结果

 <div id="container">
      <h1>My Component</h1>
      <div id="placeholder">
        <simple-cmp>Hello world!</simple-cmp>
      </div>
 </div>

谢谢!

Answer 1

When creating a component您可以传递将充当所创建组件的宿主元素的 DOM 节点:

create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any, ngModule?: NgModuleRef): ComponentRef

但由于此组件不是任何其他组件的子组件，您必须手动将其附加到 ApplicationRef 以便进行更改检测。

所以这是你需要做的:

1) 创建一个组件，指定要添加到的根节点。
2) 将 View 附加到 ApplicationRef 以便进行更改检测。您仍然没有 Input 和 ngOnChanges 操作，但 DOM 更新将正常工作。

  @Component({
      template: `
        <div id="container">
          <h1>My Component</h1>
        </div>
       `,
      selector: 'my-app'
  })
  export class AppComponent { 
      constructor(private resolver: ComponentFactoryResolver,
                  private injector: Injector,
                  private app: ApplicationRef) { 

      }

      addDynamicComponent() {
         let factory = this.resolver.resolveComponentFactory(SimpleComponent);

         let newNode = document.createElement('div');
         newNode.id = 'placeholder';
         document.getElementById('container').appendChild(newNode);

         const ref = factory.create(this.injector, [], newNode);
         this.app.attachView(ref.hostView);
      }
  }