Angular中修改类本地属性时ngOnChanges被触发的原因及解决方案

你的问题核心是两个点共同导致的：

1. 父组件模板直接将filterBy()方法的返回值绑定给了子组件的@Input()输入项。Angular变更检测每次触发时（比如你点击子组件的详情按钮就会触发全局变更检测），都会重新执行一次filterBy()方法获取最新值。
2. filterBy()方法的返回值引用在不同筛选条件下表现不同：
   • 当筛选条件为「全部」时，直接返回原始的customers数组引用，引用没有变化，Angular判定输入未更新，所以不会触发ngOnChanges
   • 当筛选条件为其他值时，你调用了Array.filter()方法，这个方法每次执行都会返回一个全新的数组引用，Angular判定输入发生了更新，所以每次变更检测都会触发ngOnChanges钩子，把你修改过的showDetail属性重置为初始的false。

下面是几个生产环境常用的修复方案：

• 方案1：父组件预存筛选结果，避免模板绑定方法（最推荐）
  父组件新增一个filteredCustomers属性，只在筛选条件切换时才重新计算筛选结果，不要在模板里直接调用filterBy()。
  父组件修改示例：

  export class AppComponent {
    customers: ICustomer[];
    currentlySelected: Option = 'All';
    filteredCustomers: ICustomer[] = []; // 新增属性存筛选结果
  
    constructor() {
      this.customers = [/* 原有数据 */];
      this.filteredCustomers = this.customers; // 初始化默认值
    }
  
    selectBy(option: Option): void {
      this.currentlySelected = option;
      this.filteredCustomers = this.filterBy(); // 切换筛选时才重新计算
    }
  
    // filterBy方法保持不变
  }
  

  父组件模板修改为绑定属性，而不是方法：

  <app-list [customers]="filteredCustomers"></app-list>
  

  这个方案从根源上避免了每次变更检测都生成新数组的问题，只有真正切换筛选条件时才会更新输入，不会误触发ngOnChanges。

• 方案2：子组件拆分输入属性和展示属性
  子组件不要直接修改@Input()传入的customers变量，新增一个单独的displayList变量用来存加了showDetail的展示数据，ngOnChanges只有在输入的客户列表ID集合真的发生变化时，才重新初始化displayList，否则保留原有展开状态。
  子组件修改示例：

  export class ListComponent implements OnInit, OnChanges {
    @Input() customers: ICustomer[] = [];
    displayList: (ICustomer & {showDetail?: boolean})[] = [];
  
    ngOnChanges(changes: SimpleChanges): void {
      // 只在客户ID集合变化时才重新初始化，否则保留原有展开状态
      const newIds = changes.customers.currentValue.map(i => i.id).join(',');
      const oldIds = changes.customers.previousValue?.map(i => i.id).join(',') ?? '';
      if (newIds !== oldIds) {
        this.displayList = changes.customers.currentValue.map(
          (customer: ICustomer) => ({
            ...customer,
            showDetail: false,
          })
        );
      }
    }
  
    toggleDetail(current: ICustomer): void {
      this.displayList = this.displayList.map((customer: ICustomer) =>
        customer.id === current.id
          ? { ...customer, showDetail: !customer.showDetail }
          : customer
      );
    }
  }
  

  子组件模板里所有循环都改成遍历displayList即可。

• 方案3：使用纯管道（Pure Pipe）处理筛选
  把筛选逻辑封装成Angular纯管道，纯管道只有在输入参数发生变化时才会重新计算返回值，不会每次变更检测都重新执行，也能避免生成多余的新数组。

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