模板引用变量在ng-template内部返回未定义

Question

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

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

test-component.html

xs

test-component.ts

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

test-component.ts

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

我已经尝试过在角度的所有生命周期挂钩中打印它，但是它总是返回未定义的。但是，当我尝试将其放在 ng-template 之外时，它就可以正常工作。

有什么办法吗？

Answer 1

这是因为ng-template中的内容尚未呈现。

您应该首先使用ngTemplateOutlet激活它。

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

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

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

DEMO

Answer 2

之所以会发生这种情况，是因为ng-template从未单独呈现在html上。

根据Angular文档

  

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

可以使用ngTemplateOutlet或使用*ngIf else或类似的东西来引用它。它本身并不存在

  

更新：

<div *ngIf="someConditionCheck;else abc">
    content here ...
</div>

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

Demo code