Working Example

Question

我使用Angular 5。

在我的component中，我有：

@ContentChild('contentTemplate') contentTemplate: TemplateRef<any>;

我的html：

<data-grid-column>
  <ng-template #contentTemplate>
    <span class="elo">Hello</span>
  </ng-template>
</data-grid-column>

我正在尝试查看：

ngAfterViewChecked () {
  console.log(this.contentTemplate.elementRef.nativeElement);
}

但是输出是：

<!---->

怎么了？

Answer 1

我希望它能起作用。

<ng-container #contentTemplate><span class="elo">Hello</span></ng-container>

Answer 2

ng-template -是用于呈现HTML的Angular元素。它永远不会直接显示。实际上，在渲染视图之前，Angular将其及其内容替换为注释

根据官方文档。

参考

我不知道您为什么在这里使用ng-template，但是您可以使用ng-container来打印您的内容。

同样，在HTML元素上使用#局部变量时，也需要使用ViewChild，就像这样-

@ViewChild('contentTemplate') contentTemplate: any;