У меня есть вопрос, касающийся создания динамических компонентов в 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>

Спасибо!