模板引用变量在 ng-template 中返回 undefined

Question

已经尝试过这个和这个解决方案，但没有任何效果。

我正在使用 Angular 7 并尝试获取我已放置在ng-template标签中的参考变量。但它总是返回undefined

测试组件.html

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

测试组件.ts

@ViewChild('abc') abc: ElementRef; //---> works fine
@ViewChild('xyz') xyz: ElementRef; //---> undefined

测试组件.ts

ngAfterViewInit(){
  console.log(this.xyz); //---> undefined  
}

我已经尝试在 angular 的所有生命周期钩子中打印它，但它总是返回未定义。但是当我尝试将它放在ng-template 的外侧时，它工作得很好。

有什么办法吗？

Answer 1

那是因为，里面的内容ng-template还没有被渲染。

您应该首先使用ngTemplateOutlet.

在你的html中添加以下代码，它应该可以工作

<ng-template #abc>
  <div #xyz>    
  </div>
</ng-template>

<ng-container *ngTemplateOutlet="abc"></ng-container>

演示