如何在angular4中使用TemplateRef的createEmbeddedView方法？

Question

我开始学习 Angular 中的 DOM 操作，并注意到 templateRef 及其方法 createEmbeddedView。我更想了解这种方法。现在我的问题是，如何使用这个方法的createEmbeddedView

@Component({
  selector: 'app-root',
  template: `
<ng-template #template>

</ng-template>
  `
})
export class AppComponent implements AfterViewChecked {
        @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;      
  constructor() { }

  ngAfterViewChecked() {
    this._template.createEmbeddedView('this is a embedded view')
  }
}

Answer 1

您可以使用createEmbeddedView 方法创建一个嵌入式视图，然后通过ViewContainerRef 将该视图附加到DOM：

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
        <ng-container #vc></ng-container>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
    @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
    constructor() { }

    ngAfterViewChecked() {
        const view = this._template.createEmbeddedView({fromContext: 'John'});
        this.vc.insert(view);
    }
}

或者您可以直接使用ViewContainerRef 创建视图：

ngAfterViewChecked() {
    this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}

上下文是一个具有属性的对象，您可以通过let- 绑定访问这些属性。

要了解更多信息，请阅读 Exploring Angular DOM manipulation techniques using ViewContainerRef 并参阅 this answer。