Angular中能否用组件变量作为@ViewChild的模板引用变量？

核心结论 #

你想直接用组件变量作为模板引用变量（比如@ViewChild(unique_var)）的思路不可行——模板引用变量是模板中声明的静态标识符，无法绑定组件类里的动态变量，Angular不支持这种写法。

解决思路 #

根据你的场景，提供几种可行方案：

1. 利用路由数据区分实例，结合动态属性定位DOM

• 第一步：在路由配置中给两个路由添加唯一标识的data参数：

  const routes: Routes = [
    { path: 'route-a', component: YourComponent, data: { chartKey: 'chart-in-route-a' } },
    { path: 'route-b', component: YourComponent, data: { chartKey: 'chart-in-route-b' } }
  ];
  

• 第二步：组件中注入ActivatedRoute获取路由数据，并给模板元素添加动态属性：

  import { ActivatedRoute } from '@angular/router';
  
  export class YourComponent {
    chartKey: string;
  
    constructor(private route: ActivatedRoute) {
      this.chartKey = this.route.snapshot.data['chartKey'];
    }
  }
  

  模板修改为：

  <div fxFlexFill>
    <div class="some_class" #achart [attr.data-chart-key]="chartKey"></div>
  </div>
  

• 第三步：如果需要操作该DOM元素，既可以用@ViewChild('achart')（每个组件实例会独立获取自己的元素），也可以通过chartKey精准定位：

  const targetChart = document.querySelector(`[data-chart-key="${this.chartKey}"]`);
  

2. 利用组件实例的独立性（最简单方案）

Angular中，不同路由加载的同一个组件是完全独立的实例，@ViewChild('achart')在每个实例中只会指向当前实例内的<div #achart>，本质上不会出现引用冲突。如果你的场景中确实出现了问题，大概率是全局状态、共享服务或其他逻辑导致的，而非模板引用变量本身的问题。

如果只是为了测试需要区分两个实例的DOM，直接通过路由数据给元素加唯一标识即可，无需修改模板引用变量名。

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