Angular重复定义模板变量报错：包裹div后正常的原因解析

核心原因：模板变量的作用域规则 #

Angular的模板变量在同一模板上下文内不允许重复定义。当你直接在两个同级元素上使用同名模板变量时，它们处于同一个根模板上下文，Angular编译器会检测到重复的变量声明，抛出“template variable already defined”类的错误——这是因为编译器无法确定该变量应该指向哪个元素，存在歧义。

而用div包裹后，每个div会创建一个独立的嵌入式子模板上下文。此时两个同名变量分别属于不同的子上下文，编译器会将它们视为两个独立的变量，不会触发重复定义检查。同时，@ViewChildren()会遍历所有模板上下文，收集所有匹配变量名的元素，因此能正常获取到这两个元素。

是否必须用div包裹？不是 #

div只是创建子上下文的方式之一，任何能隔离模板上下文的结构都可以实现相同效果，常见替代方案包括：

• 使用<ng-template>：<ng-template>本身就是独立的模板上下文容器，里面的变量不会和外部或其他ng-template内的变量冲突
• 利用结构指令：比如*ngIf、*ngFor这类结构指令，本质上会创建嵌入式视图，自带上下文隔离（即使*ngIf的条件始终为true也有效）

举几个例子：

错误写法（直接同级重复变量）

<!-- 编译报错：重复模板变量 -->
<input #myInput type="text">
<input #myInput type="text">

正确写法1：div包裹

<!-- 正常工作，变量分属不同上下文 -->
<div>
  <input #myInput type="text">
</div>
<div>
  <input #myInput type="text">
</div>

正确写法2：ng-template

<ng-template>
  <input #myInput type="text">
</ng-template>
<ng-template>
  <input #myInput type="text">
</ng-template>

正确写法3：*ngIf隔离

<div *ngIf="true">
  <input #myInput type="text">
</div>
<div *ngIf="true">
  <input #myInput type="text">
</div>

补充说明 #

@ViewChildren()的匹配逻辑是遍历当前组件的所有视图（包括根视图和所有嵌入式子视图），只要变量名匹配，无论处于哪个子上下文，都会被收集。这也是为什么包裹后能正常获取到多个元素的原因——变量在不同上下文合法存在，且能被@ViewChildren()遍历到。

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