typescript 一个示例，显示动态地将模板注入Angular2组件的方式

Posted 2021-05-21

import { NgFor } from '@angular/common'
import { Component, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef } from '@angular/core'

@Component({
  directives: [
    NgFor
  ],
  selector: 'component',
  template: `
    <ul><li #item *ngFor="let number of list">{{number}}</li></ul>
    
    <template #template>
      <li>template</li>
    </template>
  `
})
class _Component {

  @ViewChild('template')
  template: TemplateRef<any>

  @ViewChildren('item', { read: ViewContainerRef })
  items: QueryList<ViewContainerRef>

  list: number[] = [0, 1, 2, 3, 4]

  ngAfterViewInit() {
    setTimeout(() => {
      this.items.first.createEmbeddedView(this.template)
    }, 1000)
  }
  
}