从ng-content访问@ViewChild模板

时间:2017-04-03 14:32:34

标签: angular

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

app组件:

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

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

我得到undefined使用不同生命周期钩子的问题(ngOnInit,ngAfterViewInit)......

1 个答案:

答案 0 :(得分:16)

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

@ContentChild('template') template;  

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

另见