angular – 从ng-content访问@ViewChild模板

发布时间：2020-12-17 07:30:12 所属栏目：安全来源：网络整理

导读：是否可以将模板与ng-content结合使用,如下所述： app组件： table-column template #template let-item="item" input type="text" [(ngModel)]="item.foo" / /template/table-column 表列组件： @Component({ selector: 'table-column',template: 'ng-conten

是否可以将模板与ng-content结合使用,如下所述：

app组件：

<table-column>
  <template #template let-item="item">
    <input type="text" [(ngModel)]="item.foo" />
  </template>
</table-column>

表列组件：

@Component({
  selector: 'table-column',template: '<ng-content></ng-content>'
})
export class TableColumnComponent implements OnInit {
  @ViewChild('template') template;  

  ngOnInit() {
    console.log(this.template); // undefined
    // create column object with template and different metadata...
  });      
}

Plunker？

我使用不同的生命周期钩子(ngOnInit,ngAfterViewInit)来定义问题…

如果你想在Light DOM中搜索,那么你需要使用@ContentChild并等到ngAfterContentInit挂钩

@ContentChild('template') template;  

ngAfterContentInit() {
  console.log(this.template);
});

也可以看看

> What’s the difference between @ViewChild and @ContentChild?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!