Eu tenho uma pergunta sobre a criação de componentes dinâmicos no Angular 2 rc5.

Então, vamos supor que temos dois componentes angulares simples:

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

Em seguida, um pedaço de código não angular externo modifica um DOM:

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

Aqui está uma árvore presumível após manipulações:

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

Então, o que estou tentando fazer é adicionar dinamicamente a instância SimpleComoponent ao #placeholder div. Como posso alcançar esse resultado?

Eu tenho tentado usar ComponentFactory.createComponent (injector, [], newNode), mas ele adicionou o componente, mas nem os ganchos do ciclo de vida nem a ligação nem funcionaram.

Acredito que haja alguma maneira de implementar isso usando o ViewContainerRef, mas como vinculá-lo ao nó criado dinamicamente?

Aqui está o resultado que eu espero

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

Obrigado!