如何将2个数据传递给子组件并使用ngOnChanges和SimpleChanges

在Angular中，可以使用@Input装饰器将数据从父组件传递给子组件。然后，可以使用ngOnChanges生命周期钩子和SimpleChanges对象来检测输入属性的变化并采取相应的操作。

以下是一个示例，展示如何将2个数据传递给子组件并使用ngOnChanges和SimpleChanges：

在父组件中定义要传递给子组件的数据：

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [data1]="data1" [data2]="data2"></app-child>
  `,
})
export class ParentComponent {
  data1: any;
  data2: any;

  constructor() {
    this.data1 = 'Hello';
    this.data2 = 'World';
  }
}

在子组件中使用@Input装饰器接收父组件传递的数据，并在ngOnChanges中处理数据变化：

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

@Component({
  selector: 'app-child',
  template: `
    <p>Data 1: {{ data1 }}</p>
    <p>Data 2: {{ data2 }}</p>
  `,
})
export class ChildComponent implements OnChanges {
  @Input() data1: any;
  @Input() data2: any;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data1) {
      console.log('Data 1 changed:', changes.data1.currentValue);
      // 在这里处理data1的变化
    }

    if (changes.data2) {
      console.log('Data 2 changed:', changes.data2.currentValue);
      // 在这里处理data2的变化
    }
  }
}

在父组件中，我们使用[data1]="data1"和[data2]="data2"将数据传递给子组件。在子组件中，我们使用@Input装饰器定义了data1和data2作为输入属性。当这些属性的值发生变化时，ngOnChanges方法会被调用，并且SimpleChanges对象会包含变化的信息。

在ngOnChanges方法中，我们可以根据需要处理输入属性的变化。在示例中，我们简单地在控制台打印出变化的值，但你可以根据实际需求执行任何操作。

请注意，这只是一个示例，你可以根据自己的需求进行修改和扩展。关于Angular的更多信息，你可以参考Angular官方文档。如果你想了解更多关于腾讯云的产品和服务，可以访问Tencent Cloud。