Angular 2:如何在追加到DOM后呈现动态创建的组件

Question

首先,Plunker中提供了所有代码.

一些代码

我有一个根Angular2组件,如下所示:

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <h2>Angular2 Root Component</h2>
    <div data-dynamic-content></div>
  `,
})
export class App {}

该[data-dynamic-content]元素是我将在运行时添加的组件的占位符.这些组件也是动态的,创建如下:

import {Component} from '@angular/core'

export function createComponent(selector: string, value: string) {
  @Component({
    selector: selector, 
    template: `<h4>Dynamic Component: {{v}}</h4>`,
  })
  class MyDynamicComponent {
    v = value;
  }

  return MyDynamicComponent;
};

请记住,这是一个极其简化的例子.

问题陈述

我想创建不同的表示形式MyDynamicComponent,将它们附加到[data-dynamic-content]元素树中,并使它们具有全部功能.

我试过的

到目前为止唯一有效的方法是在追加到DOM时引导新创建的组件:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {createComponent} from './my-dynamic.component';

export function addComponentDynamically(selector, value) {
  var dynamicComponent = createComponent(selector, value);

  var container = document.querySelector('[data-dynamic-content]');
  var wrapper = document.createElement("div");
  wrapper.innerHTML = `<${selector}></${selector}>`;
  container.appendChild(wrapper);

  // !! won't work without this line
  bootstrap(dynamicComponent);
};

我也玩过DynamicComponentLoader.看起来它不符合我的需求 - DynamicComponentLoader.loadNextToLocation需要一个ViewContainerRef参数(例如,你应该事先知道你的组件将在哪里),而我没有这个.正如我之前提到的,MyDynamicComponent可以在元素树中的任何位置呈现[data-dynamic-content],不一定在此元素本身中.

结论

虽然这有效,但我非常怀疑这种方法是否具有可扩展性(在Chrome中测试了1000个更复杂的组件 - 内存消耗达到峰值约750 MB,然后降低到约400 MB).

有没有比bootstrap一次又一次地调用更好的方法来完成这项工作？