小编Val*_*dov的帖子

我有一个关于Angular 2 rc5中动态组件创建的问题.

所以我们假设我们有两个普通的角度分量:

  @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!' }

然后一些外部非角度代码块修改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),但它添加了组件,但生命周期挂钩和绑定都没有工作.

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

这是我期望的结果

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

谢谢!