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

Question

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

应用组件:

<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 ？

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

Answer 1

如果你想在 Light DOM 中搜索，那么你需要使用 @ContentChild 并等待 ngAfterContentInit hook

@ContentChild('template') template;  

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

另见

• What's the difference between @ViewChild and @ContentChild?