Angular中带*ngIf的元素模板引用失效，报错suggestionIcon不存在

问题代码 #

<mat-icon
  #suggestionIcon="cdkOverlayOrigin"
  class="suggestionIcon" 
  *ngIf="part.highlight"
  (click)="openOverlay()"
  cdkOverlayOrigin
>
  add_circle
</mat-icon>
<ng-template 
  #myTemplate
  *ngIf="part.highlight"
  cdkConnectedOverlay 
  [cdkConnectedOverlayOrigin]="suggestionIcon"
> 
 overlay 
</ng-template>

报错信息 #

Property 'suggestionIcon' does not exist on type 'InteractionPostComponent'.ngtsc(2339)
interaction-post.component.ts(38, 4): Error occurs in the template of component InteractionPostComponent.

用[style.visible]替代*ngIf后功能正常，但想了解*ngIf引发问题的原因。

核心原因 #

Angular的*ngIf是结构型指令，它会直接从DOM中添加/移除元素，而非仅隐藏元素。当part.highlight为false时，带有#suggestionIcon引用的<mat-icon>会被完全从DOM和模板上下文里移除，此时<ng-template>中绑定的[cdkConnectedOverlayOrigin]="suggestionIcon"就找不到对应的引用变量，TypeScript编译阶段会直接抛出“变量不存在”的错误。

而[style.visible]只是通过CSS控制元素的显示状态，元素本身始终存在于DOM和模板上下文中，suggestionIcon引用变量一直有效，因此不会触发编译错误。

替代解决方案（除style.visible外） #

• 将*ngIf移到共同父容器上，确保<mat-icon>和<ng-template>的存在状态完全同步：

  <div *ngIf="part.highlight">
    <mat-icon
      #suggestionIcon="cdkOverlayOrigin"
      class="suggestionIcon" 
      (click)="openOverlay()"
      cdkOverlayOrigin
    >
      add_circle
    </mat-icon>
    <ng-template 
      #myTemplate
      cdkConnectedOverlay 
      [cdkConnectedOverlayOrigin]="suggestionIcon"
    > 
     overlay 
    </ng-template>
  </div>
  

• 给[cdkConnectedOverlayOrigin]添加空值保护：[cdkConnectedOverlayOrigin]="suggestionIcon || null"，但这种方式需要注意part.highlight为false时overlay的源丢失问题，需结合业务逻辑处理。

内容的提问来源于stack exchange，提问作者Amal Joby