Angular中ngOnChanges通过Input获取数据仅Safari失效问题

问题描述 #

父组件通过[data]="infoData"传递对象给子组件，子组件用@Input()接收并在ngOnChanges中处理逻辑，该功能在Chrome中正常运行，但在Safari浏览器中无法触发预期行为。

父组件代码：

<org-chart-dialog-user-info [data]="infoData"></org-chart-dialog-user-info>

子组件代码：

@Input() data: any;

ngOnChanges() {
  if (this.data) {
    this.loaded = true;
  } else {
    this.loaded = false;
  }
}

可能的解决方案 #

1. 确保对象引用发生变更 #

Angular的变更检测依赖引用变化，如果父组件仅修改infoData的属性而非替换整个对象，Safari可能无法触发ngOnChanges。可以通过重新赋值更新引用：

// 父组件中更新infoData时
this.infoData = { ...this.infoData, [updatedKey]: updatedValue };
// 或者使用Object.assign
this.infoData = Object.assign({}, this.infoData, { [updatedKey]: updatedValue });

2. 优化ngOnChanges的判断逻辑 #

直接判断this.data可能存在Safari下的时序问题，建议通过SimpleChanges参数检查变更细节：

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

// 子组件中修改ngOnChanges
ngOnChanges(changes: SimpleChanges) {
  const dataChange = changes['data'];
  if (dataChange && dataChange.currentValue) {
    this.loaded = true;
  } else {
    this.loaded = false;
  }
}

3. 显式触发变更检测 #

如果无法修改对象引用，可以在父组件中注入ChangeDetectorRef手动触发检测：

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

constructor(private cdr: ChangeDetectorRef) {}

// 更新infoData属性后调用
this.cdr.detectChanges();

4. 替换any类型为具体接口 #

避免使用any类型，定义明确的接口类型帮助Angular更精准地检测变更：

// 定义数据接口
interface UserInfo {
  id: number;
  name: string;
  // 其他属性
}

// 子组件中修改Input类型
@Input() data: UserInfo;

5. 检查Zone.js兼容性 #

部分Safari版本可能与Zone.js存在兼容问题，确保项目依赖的Zone.js为最新版本，或在polyfills.ts中添加必要的polyfill：

// polyfills.ts中添加
import 'zone.js/dist/zone'; // Angular必备
import 'core-js/es/object/assign'; // 针对旧Safari的Object.assign兼容

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