Tengo una pregunta sobre la creación de componentes dinámicos en Angular 2 rc5.

Así que supongamos que tenemos dos 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!' }

Luego, un fragmento de código externo no angular modifica un DOM:

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

Aquí hay un árbol presumible después de las manipulaciones:

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

Entonces, lo que estoy tratando de hacer es agregar dinámicamente la instancia SimpleComoponent en #placeholder div. ¿Cómo puedo lograr este resultado?

He estado intentando usar ComponentFactory.createComponent (injector, [], newNode), aunque agregó el componente, pero ni los ganchos ni el enlace del ciclo de vida no funcionaron en absoluto.

Creo que hay alguna forma de implementar esto usando ViewContainerRef, pero ¿cómo puedo vincularlo con un nodo creado dinámicamente?

Aquí está el resultado que espero

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

¡Gracias!