Angular 使用*ngIf结合ng-template时'signinButton'属性不存在的TS报错

• 问题本质是Angular模板的结构指令作用域隔离规则触发的编译检查错误：*ngIf、ng-template这类结构指令会创建独立的内嵌视图作用域，你在两个条件分支内定义的#signinButton模板引用，仅对当前所属的内嵌视图内部可见。
• 你在<form>标签上的ngSubmit绑定，处于比内嵌视图更高的外层作用域，根本无法直接访问到被隔离的模板引用。编译器在静态检查时检测不到外层作用域存在signinButton的定义，就会默认把这个变量判定为组件类上的属性，最终抛出「类型'LoginFormComponent'上不存在属性'signinButton'」的TS报错。
• 直接平铺按钮时没有结构指令带来的作用域隔离，模板引用和form标签处于同一作用域，编译器能正常识别引用关系，所以不会触发报错。

注意：Angular的编译检查会严格禁止跨结构指令视图作用域的模板引用访问，哪怕你绕开检查在运行时拿到了值，也会因为视图销毁/重建的逻辑出现引用丢失的问题。

方案1：消除跨作用域传参的需求 #

不再在form的ngSubmit事件里跨作用域传入signinButton，把按钮实例的传递下沉到按钮自身的点击事件中，从根源绕开作用域限制：

<form
  #loginForm
  [formGroup]="loginForm"
  (ngSubmit)="onLogin()"
>
  <ng-container *ngIf="show; else notShow">
    <button
      size="50"
      [expanded]="true"
      type="submit"
      (click)="onLogin($event.target)"
    ></button>
  </ng-container>

  <ng-template #notShow>
    <button
      priority="1"
      [disabled]="loginForm.controls.login.value.length < 2"
      size="50"
      [expanded]="true"
      type="submit"
      (click)="onLogin($event.target)"
    ></button>
  </ng-template>
</form>

调整后每个按钮在自己的作用域内触发事件时，会把当前按钮的真实实例直接传递给处理方法，完全不需要跨作用域读取被隔离的模板引用，原有条件渲染、表单校验的逻辑都可以完整保留。

方案2：通过ViewChild获取按钮实例 #

如果业务逻辑需要在onLogin方法内部统一操作按钮状态（比如切换loading、临时禁用防重复提交），不需要靠模板传参，直接在组件类中通过@ViewChild获取当前渲染的按钮实例即可：

1. 组件类中添加视图查询逻辑：

   import { ViewChild, ElementRef } from '@angular/core';
   
   // 匹配所有带#signinButton标记的元素，自动穿透结构指令的内嵌视图作用域
   @ViewChild('signinButton') currentBtnRef?: ElementRef<HTMLButtonElement>;
   
   onLogin() {
     // 直接在方法内部获取按钮实例做状态操作
     const btnEl = this.currentBtnRef?.nativeElement;
     btnEl?.setAttribute('disabled', 'true');
     // 原有登录提交逻辑...
   }
   

2. 模板中移除form标签上的跨作用域传参，两个分支的按钮保留#signinButton标记即可：

   <form
     #loginForm
     [formGroup]="loginForm"
     (ngSubmit)="onLogin()"
   >
     <ng-container *ngIf="show; else notShow">
       <button #signinButton size="50" [expanded]="true" type="submit"></button>
     </ng-container>
   
     <ng-template #notShow>
       <button
         #signinButton
         priority="1"
         [disabled]="loginForm.controls.login.value.length < 2"
         size="50"
         [expanded]="true"
         type="submit"
       ></button>
     </ng-template>
   </form>
   

这个方案的优势是不需要改动原有事件触发链路，@ViewChild的查询机制可以自动穿透结构指令的作用域，不管按钮在哪个条件分支下渲染，都会在视图初始化完成后拿到对应的实例引用，不会触发编译报错。

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