使用Input()的组件之间的角度传递数据不会触发ngOnChanges_组件之间的角度传递数据_在Angular 2中不使用@Input装饰器的组件之间传递变量 - 腾讯云开发者社区

基础概念

在Angular中，Input()装饰器用于将数据从父组件传递到子组件。当父组件的数据发生变化时，子组件会接收到新的值。然而，ngOnChanges生命周期钩子并不会因为Input()数据的改变而自动触发，除非输入属性的值是一个对象或数组，并且其引用发生了变化。

类型

Input()可以接受任何类型的值，包括基本类型（如字符串、数字、布尔值）和复杂类型（如对象、数组）。

应用场景

当你需要在组件树中传递数据时，Input()非常有用。例如，一个父组件可能需要将用户输入的数据传递给多个子组件，以便它们可以显示或处理这些数据。

问题原因

ngOnChanges不会因为基本类型的值变化而触发，因为基本类型的赋值是按值传递的，而不是按引用。如果你传递的是一个对象或数组，只有当这个对象或数组的引用发生变化时，ngOnChanges才会触发。

解决方法

使用对象或数组：确保传递给Input()的是一个对象或数组，这样即使内部值变化，引用也不会变，从而触发ngOnChanges。

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child [data]="childData"></app-child>`
})
export class ParentComponent {
  childData = { value: '' };
}

// 子组件
@Component({
  selector: 'app-child',
  template: `{{ data.value }}`
})
export class ChildComponent implements OnChanges {
  @Input() data: any;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed', changes);
  }
}

手动触发：如果你传递的是基本类型，可以在父组件中手动触发子组件的方法。

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child [data]="childData" (dataChange)="onDataChange()"></app-child>`
})
export class ParentComponent {
  childData = '';

  onDataChange(): void {
    // 手动调用子组件的方法
    const child = this._viewChildren.find(child => child instanceof ChildComponent);
    if (child) {
      child.someMethod();
    }
  }
}

// 子组件
@Component({
  selector: 'app-child',
  template: `{{ data }}`
})
export class ChildComponent {
  @Input() data: string;

  someMethod(): void {
    console.log('Data updated');
  }
}