在Angular中,可以使用@Input
和@Output
装饰器来实现子属性的变更通知。
以下是一个示例:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Data: {{ parentData }}
`,
})
export class ParentComponent {
parentData: string = 'Initial Data';
onDataChange(newData: string) {
this.parentData = newData;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
@Input() data: string;
@Output() dataChange: EventEmitter = new EventEmitter();
updateData() {
const newData = 'New Data';
this.data = newData;
this.dataChange.emit(newData);
}
}
在父组件中,我们定义了一个名为parentData
的属性,并把它传递给子组件。同时,我们还定义了一个名为onDataChange
的方法来接收子组件发出的数据变更事件。
在子组件中,我们使用了@Input
装饰器来接收父组件传递的数据,并使用@Output
装饰器创建了一个事件发射器dataChange
,用于通知父组件数据的变更。当点击按钮时,我们更新了子组件的数据,并通过dataChange.emit()
方法触发了数据变更事件。
这样,当子组件的数据发生变化时,父组件就能够接收到通知,并更新相应的内容。