Angular Material循环标签页：如何阻止组件功能在其他标签页生效

这个坑我之前踩过！核心问题出在你把isShow状态放在了my-form组件内部，而Angular处理<md-tab-group>的动态标签时，要么会因为组件复用导致状态共享，要么标签切换时的组件销毁重建会让状态混乱，最终就出现了"操作一个标签，其他标签跟着变"的情况。

下面是具体的解决步骤，亲测有效：

1. 把状态和每个subject绑定起来 #

首先在父组件里，给每个subject分配独立的显示状态。推荐用单独的对象存储状态，避免污染原始的subject数据：

// 父组件.ts文件
subjects = [{id: 1, name: '语文'}, {id: 2, name: '数学'}, {id: 3, name: '英语'}];
// 用对象映射每个subject的输入框显示状态
inputShowStatus: {[key: number]: boolean} = {};

ngOnInit() {
  // 初始化所有标签的状态为隐藏
  this.subjects.forEach(sub => {
    this.inputShowStatus[sub.id] = false;
  });
}

// 切换对应subject的输入框显示状态
toggleInput(subjectId: number) {
  this.inputShowStatus[subjectId] = !this.inputShowStatus[subjectId];
}

2. 改造my-form组件，通过输入输出传递状态 #

把组件内部的isShow改成通过@Input接收，用@Output触发状态变更，让组件变成纯展示和交互的"木偶组件"：

// my-form.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  @Input() isShow: boolean;
  @Output() toggle = new EventEmitter<void>();

  toggleInputShow() {
    this.toggle.emit();
  }
}

模板不用改，保持原来的逻辑：

<input *ngIf="isShow" type="text">
<button (click)="toggleInputShow()">切换输入框</button>

3. 在父组件模板中关联状态与组件 #

修改父组件的标签组模板，把每个标签的状态传递给my-form，同时绑定切换事件：

<md-tab-group>
  <md-tab *ngFor="let subject of subjects; trackBy: trackById">
    <ng-template md-tab-label>{{subject.name}}</ng-template>
    <ng-template md-tab-content>
      <my-form 
        [isShow]="inputShowStatus[subject.id]"
        (toggle)="toggleInput(subject.id)">
      </my-form>
    </ng-template>
  </md-tab>
</md-tab-group>

别忘了在父组件里加trackBy方法，防止*ngFor因为数组变化复用组件实例：

trackById(index: number, subject: any): number {
  return subject.id;
}

为什么这样能解决问题？ #

• 每个标签的显示状态现在和对应的subject一一绑定，存储在父组件的映射对象里，彻底摆脱了组件内部状态的干扰。
• trackBy方法告诉Angular如何识别不同的标签项，避免不必要的组件复用，保证每个标签的组件实例都是独立的。

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