Question

我正盯着角度学习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。

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

1 个答案: