Angular 父组件重新请求接口获取数据，使用@Input()传递数据，子组件没有更新视图问题

在 Angular 中，当父组件重新请求接口并获得新数据时，需要将这些新数据传递给子组件，并通知它们更新自己的视图。

使用 @Input 装饰器将数据从父组件传递到子组件。

在父组件中，将新数据传递给子组件：

<app-child [data]="newData"></app-child>

在子组件中，通过 @Input 装饰器接收数据：

@Input() data: any;

当数据发生更改时，子组件按照常理会自动更新视图。

但是，存在一些特殊情况：

1.如果子组件的变更检测策略为 OnPush，则必须手动告诉 Angular 当前组件的输入属性发生了变化。这样，Angular 才能正确地更新视图。

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

@Component({
  selector: 'app-child',
  template: '<p>{
   
   { data }}</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: any;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges() {
    this.cdr.markForCheck();
  }
}

2.如果更新的是父组件中的引用类型数据，例如数组或对象，并且子组件通过 @Input() 等方式引用这些数据，则可能需要手动处理这些数据，以确保子组件可以正确响应更新。

例如，在更新数组数据时可以使用浅拷贝来创建一个新的数组：

// 更新数据并创建新的数组
this.myArray = [...this.myArray, newValue];

如果子组件有自己的init方法，可以使用 ngOnChanges 生命周期钩子监视输入属性值的更改并调用自定义的init方法更新视图。

在子组件中添加 ngOnChanges 钩子：

ngOnChanges(changes: SimpleChanges) {
  if (changes.data) {
    // 获取新值
    this.data = changes.data.currentValue;
    // 调用init方法，刷新视图
    this.initTable(this.data);
  }
}