Angular中如何切换ng-template显示/隐藏？已知索引且不重复元素实现

嘿，这个问题我之前帮人解决过不少，刚好能给你清晰的方案！你之前遇到的“所有元素都显示”的问题，大概率是用了一个全局的布尔变量来控制所有模板的显示，而没有针对索引做区分。咱们用跟踪当前激活索引的方式就能完美解决，具体步骤如下：

核心思路 #

定义一个组件变量来存储当前要显示的模板索引（比如activeIndex），初始值设为-1表示所有模板都隐藏。然后在模板渲染时，只渲染索引与activeIndex匹配的ng-template，切换时更新这个索引值即可。

实现代码示例 #

1. 组件类逻辑 #

首先在组件里定义activeIndex和切换方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-switcher',
  templateUrl: './template-switcher.component.html'
})
export class TemplateSwitcherComponent {
  // 初始状态：所有模板隐藏
  activeIndex: number = -1;

  toggleTemplate(index: number): void {
    // 如果点击的是当前已激活的索引，就隐藏；否则切换到该索引
    this.activeIndex = this.activeIndex === index ? -1 : index;
  }
}

2. 模板部分 #

在HTML里，我们给每个模板绑定对应的切换按钮，然后通过*ngIf和ngTemplateOutlet来控制渲染：

<!-- 切换按钮组 -->
<div class="toggle-buttons">
  <button *ngFor="let _ of [0, 1, 2]; let i = index" 
          (click)="toggleTemplate(i)"
          [class.active]="activeIndex === i">
    切换模板 {{i + 1}}
  </button>
</div>

<!-- 定义各个ng-template -->
<ng-template #template1>
  <div class="template-content">这是模板1的专属内容</div>
</ng-template>

<ng-template #template2>
  <div class="template-content">这是模板2的专属内容</div>
</ng-template>

<ng-template #template3>
  <div class="template-content">这是模板3的专属内容</div>
</ng-template>

<!-- 渲染对应索引的模板 -->
<ng-container *ngIf="activeIndex === 0">
  <ng-container *ngTemplateOutlet="template1"></ng-container>
</ng-container>

<ng-container *ngIf="activeIndex === 1">
  <ng-container *ngTemplateOutlet="template2"></ng-container>
</ng-container>

<ng-container *ngIf="activeIndex === 2">
  <ng-container *ngTemplateOutlet="template3"></ng-container>
</ng-container>

3. 动态模板场景（可选） #

如果你的模板是动态生成的（比如从数组循环创建），可以用ViewChildren来批量获取模板引用，更灵活：

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

@Component({
  selector: 'app-dynamic-template-switcher',
  templateUrl: './dynamic-template-switcher.component.html'
})
export class DynamicTemplateSwitcherComponent {
  activeIndex: number = -1;
  // 批量获取所有标记为#template的模板引用
  @ViewChildren('template') templates!: QueryList<TemplateRef<any>>;

  toggleTemplate(index: number): void {
    this.activeIndex = this.activeIndex === index ? -1 : index;
  }
}

对应的模板：

<button *ngFor="let item of ['模板A', '模板B', '模板C']; let i = index" 
        (click)="toggleTemplate(i)">
  切换{{item}}
</button>

<!-- 动态生成模板 -->
<ng-template #template let-index="index">
  <div>这是{{['模板A', '模板B', '模板C'][index]}}的内容</div>
</ng-template>

<!-- 渲染对应索引的模板 -->
<ng-container *ngIf="activeIndex !== -1">
  <ng-container *ngTemplateOutlet="templates.get(activeIndex); context: {index: activeIndex}"></ng-container>
</ng-container>

为什么之前的尝试会失败？ #

你之前可能用了一个全局布尔变量（比如showTemplate），点击按钮时直接把它设为true，这样所有依赖这个变量的模板都会同时显示。而用activeIndex跟踪具体索引后，每个模板只在自身索引匹配时才渲染，完美实现“仅显示指定索引模板”的需求。

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