在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
方法中,我们可以根据需要处理输入属性的变化。在示例中,我们简单地在控制台打印出变化的值,但你可以根据实际需求执行任何操作。
领取专属 10元无门槛券
手把手带您无忧上云