Angular中能否为ng-template动态声明模板引用变量？

很遗憾，Angular并不支持动态设置模板引用变量的名称——也就是你想用#{{user.id}}这种方式给每个<ng-template>分配动态引用名的做法是行不通的。

为什么不行？ #

模板引用变量（比如#userTemplate）是Angular模板编译器在编译阶段就需要确定的静态标识符，它会被绑定到组件的视图上下文里。而{{user.id}}是运行时的插值表达式，编译阶段Angular根本不知道最终会生成哪些变量名，自然没法把这些动态生成的引用名注册到组件的视图容器中。

替代方案：用映射表管理动态模板 #

既然没法动态生成模板引用名，我们可以换个思路：用一个对象/Map来存储模板引用和用户ID的对应关系，这样就能在需要的地方通过用户ID找到对应的模板。

步骤1：在组件中定义模板映射表

import { Component, ViewChildren, QueryList, TemplateRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-user-template-demo',
  templateUrl: './user-template-demo.component.html'
})
export class UserTemplateDemoComponent implements AfterViewInit {
  // 模拟用户列表
  users = [
    { id: 'user_001', name: 'Alice' },
    { id: 'user_002', name: 'Bob' },
    { id: 'user_003', name: 'Charlie' }
  ];
  
  // 存储用户ID和对应模板的映射
  userTemplateMap = new Map<string, TemplateRef<any>>();

  // 通过@ViewChildren收集所有模板引用
  @ViewChildren('userTemplate') userTemplates!: QueryList<TemplateRef<any>>;

  ngAfterViewInit(): void {
    // 把每个模板和对应的用户ID绑定到映射表中
    this.users.forEach((user, index) => {
      this.userTemplateMap.set(user.id, this.userTemplates.toArray()[index]);
    });
  }
}

步骤2：在模板中定义和使用模板

<!-- 定义每个用户对应的模板 -->
<div *ngFor="let user of users">
  <ng-template #userTemplate let-user="user">
    <!-- 这里放入你要调用的组件或内容 -->
    <div class="user-card">
      <h3>{{user.name}}</h3>
      <p>用户ID：{{user.id}}</p>
      <!-- 比如调用用户详情组件：<app-user-detail [user]="user"></app-user-detail> -->
    </div>
  </ng-template>
</div>

<!-- 在其他地方复用这些模板 -->
<div class="template-usage">
  <h2>复用用户模板</h2>
  <div *ngFor="let user of users">
    <ng-container 
      *ngTemplateOutlet="userTemplateMap.get(user.id); context: { user: user }"
    ></ng-container>
  </div>
</div>

另一种方案：条件渲染模板（适合模板结构差异大的场景） #

如果每个用户对应的模板结构差异明显，也可以直接通过ngSwitch或*ngIf来条件渲染不同的模板，不需要维护映射表：

<div *ngFor="let user of users">
  <ng-container [ngSwitch]="user.id">
    <ng-template ngSwitchCase="user_001">
      <app-alice-profile [user]="user"></app-alice-profile>
    </ng-template>
    <ng-template ngSwitchCase="user_002">
      <app-bob-profile [user]="user"></app-bob-profile>
    </ng-template>
    <ng-template ngSwitchDefault>
      <app-default-profile [user]="user"></app-default-profile>
    </ng-template>
  </ng-container>
</div>

总结 #

虽然不能动态生成模板引用变量，但通过模板映射表或者条件渲染的方式，完全可以实现你想要的“根据用户ID复用对应模板”的需求。

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