Angular中已修改引用，为何列表推送未被ngOnChanges检测到？

核心原因1：父组件未同步服务的数组更新 #

你在AppComponent里声明了personsList，但这个变量完全没和服务里的personList建立关联。服务里的数组虽然在tap中添加了元素，但父组件根本没拿到更新后的数组，传给子组件的listaPerson自始至终都没变化，ngOnChanges自然不会触发。

核心原因2：数组引用未变更（即使同步也会踩坑） #

就算父组件关联了服务的数组，你用push给数组加元素时，数组本身的引用没有改变。Angular的ngOnChanges只在输入属性的引用发生变化时触发，数组内部元素的增减属于内容变化，不会触发这个钩子。

修复步骤 #

1. 修改服务，对外暴露可观察的数组更新

把服务里的数组改成用BehaviorSubject管理，每次更新时发射新的数组引用：

@Injectable()
export class AppserviceService {
  private personList: Person[] = [];
  // 用BehaviorSubject对外提供数组的可观察对象
  private personListSubject = new BehaviorSubject<Person[]>([]);
  personList$ = this.personListSubject.asObservable();

  mySubject = new Subject<Person>();
  myAction = this.mySubject.asObservable().pipe(
    tap((person) => {
      this.personList.push(Object.assign({}, person));
      // 创建新数组副本，发射新引用
      this.personListSubject.next([...this.personList]);
    })
  ).subscribe();
}

2. 父组件订阅服务的数组更新

在父组件中订阅服务的personList$，同步更新本地变量：

export class AppComponent implements OnInit{
  form: FormGroup;
  personsList: Person[];
  constructor(private fb: FormBuilder, private service: AppserviceService){}

  ngOnInit() {
    // 订阅数组更新，同步到本地变量
    this.service.personList$.subscribe(list => {
      this.personsList = list;
    });
  }

  addPerson(){
    const persona = <Person>{
      Name : 'ALEX',
      Age : 43,
    }
    this.service.mySubject.next(persona)
  }
}

这样每次添加新人员时，服务会发射新的数组引用，父组件的personsList拿到新值后，传给子组件的listaPerson引用发生变化，ngOnChanges就会正常触发了。

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