Ich habe eine Frage zur Erstellung dynamischer Komponenten in Angular 2 rc5.

Gehen wir also davon aus, dass wir zwei einfache Winkelkomponenten haben:

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

Dann einige externe nicht eckige Chunck von Code-Zertifikaten ein DOM:

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

Hier ist ein mutmaßlicher Baum nach Manipulationen:

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

Also, was ich versuche zu tun, ist nur dynamisch SimpleComoponent-Instanz in #placeholder div hinzufügen. Wie kann ich dieses Ergebnis erzielen?

Ich habe versucht, ComponentFactory.createComponent (injector, [], newNode) zu verwenden. Die Komponente wurde hinzugefügt, aber weder die Hooks für den Lebenszyklus noch die Bindung funktionierten überhaupt nicht.

Ich glaube, es gibt eine Möglichkeit, dies mit ViewContainerRef zu implementieren, aber wie kann ich es mit einem dynamisch erstellten Knoten verknüpfen?

Hier ist das Ergebnis, das ich erwarte

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

Vielen Dank