Angular页面刷新时父子组件传值失效问题及后续疑问

问题背景 #

我有父组件（ParentComponent）和子组件（ChildComponent），子组件负责展示从外部API获取的数据列表。应用内导航时数据展示正常，但手动刷新父组件路由（/parent）后，子组件表格为空（API已成功返回数据），切换页面再返回后恢复正常。

• 将this.items.push(p)改为this.items = r.props后问题解决，但添加过滤代码if (someCondition){this.items = this.items.filter(i=>i.somekey==='some-val')}后，刷新页面的问题再次出现。

相关代码 #

ParentComponent.component.ts

export class ParentComponent implements OnInit {
  items: any[] = new Array();
  loading: boolean = false;

  ngOnInit(): void {
    this.getItems();
  }
  
  private getItems() {
    this.loading = true;
    this.apiService.get<any>('/some-external-api')
        .subscribe(r => {
            r.prop.forEach(p => {
                this.items.push(p);
            });
            this.loading = false;
        }, 
        e => {
          this.loading = false;
          alert(e);
        })   
  }
}

ParentComponent.html

<div class="table-container">
    <app-child-component *ngIf="!loading" [items]="items"></app-child-component>
    <app-spinner *ngIf="loading && items.length === 0" [class.loading]="items.length == 0"></app-spinner>
</div>

ChildComponent.component.ts

export class ChildComponent implements OnInit {
 @Input() items: any;
 // 省略其他代码
}

ChildComponent.html

<div *ngFor="let item of items" class="curve-row">
<!-- 省略表格生成细节 -->
</div>

问题根源 #

1. 数组引用变更敏感度：Angular变更检测依赖引用变化触发更新，push操作仅修改原数组内容但不改变引用，可能无法触发子组件更新；直接赋值新数组（this.items = r.props）会改变引用，因此能正常触发更新。
2. 过滤逻辑时机问题：添加filter后，若先赋值完整数组再过滤赋值，虽然也是新数组，但如果someCondition在刷新时未正确初始化，或过滤顺序导致变更检测未捕获到引用变化，会引发数据不显示问题。

解决方案 #

方案1：提前过滤后一次性赋值新数组 #

修改父组件getItems方法，先完成过滤逻辑，再将最终结果一次性赋值给items，确保每次赋值都是全新数组引用：

private getItems() {
  this.loading = true;
  this.apiService.get<any>('/some-external-api')
    .subscribe(r => {
      // 浅拷贝原数组，确保初始引用独立
      let processedItems = [...r.prop]; 
      
      // 执行过滤逻辑
      if (this.someCondition) {
        processedItems = processedItems.filter(i => i.somekey === 'some-val');
      }
      
      // 一次性赋值，触发变更检测
      this.items = processedItems;
      this.loading = false;
    }, e => {
      this.loading = false;
      alert(e);
    })
}

方案2：确保子组件变更检测触发 #

如果子组件使用了ChangeDetectionStrategy.OnPush策略，需手动触发变更检测：

import { Component, Input, OnInit, ChangeDetectorRef, SimpleChanges } from '@angular/core';

export class ChildComponent implements OnInit {
  @Input() items: any[]; // 建议明确类型为数组，避免any类型的潜在问题

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 当items输入属性变化时，手动标记需要检测变更
    if (changes['items']) {
      this.cdr.markForCheck();
    }
  }

  ngOnInit(): void {}
}

若无需OnPush策略，可移除子组件的changeDetection配置（默认是Default策略，会自动检测变更）。

方案3：验证过滤条件的初始化时机 #

确保someCondition在调用getItems前已正确初始化（比如依赖路由参数、localStorage等数据时）：

ngOnInit(): void {
  // 先初始化过滤条件，再调用数据获取方法
  this.initCondition().then(() => {
    this.getItems();
  });
}

private async initCondition(): Promise<void> {
  // 示例：从路由参数获取条件值
  const param = await this.route.paramMap.toPromise();
  this.someCondition = param.get('filterKey') === 'some-val';
}

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