Angular 2-动态创建/注入组件到*ngFor循环内的特定元素中

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div #container></div>
      <ul>
        <li *ngFor="let item of items; let i = index">
          {{ item }}
          <ng-template #dynamicComponent></ng-template>
        </li>
      </ul>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  @ViewChild('dynamicComponent', { read: ViewContainerRef }) dynamicComponentTemplate: ViewContainerRef;

  items = ['Item 1', 'Item 2', 'Item 3'];

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    this.items.forEach((item, index) => {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
      const componentRef = this.container.createComponent(componentFactory);
      componentRef.instance.item = item;
      componentRef.instance.index = index;
      componentRef.instance.templateRef = this.dynamicComponentTemplate;
    });
  }
}