在Angular中,父子组件之间的变更检测可以通过属性绑定和@Input装饰器来实现。以下是一个示例:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
export class ParentComponent {
parentMessage = 'Hello from parent';
changeMessage() {
this.parentMessage = 'Updated message from parent';
}
}
子组件:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ message }}
`,
})
export class ChildComponent implements OnChanges {
@Input() message: string;
ngOnChanges(changes: SimpleChanges) {
if (changes.message) {
console.log('Message changed:', changes.message.currentValue);
}
}
}
在父组件中,我们定义了一个parentMessage
变量,并通过属性绑定将其传递给子组件。当点击按钮时,我们更新parentMessage
的值。
在子组件中,我们使用@Input
装饰器定义了一个message
属性,用于接收父组件传递的值。我们还实现了OnChanges
接口,并在ngOnChanges
方法中监听message
属性的变化。
当父组件中的parentMessage
发生变化时,Angular会自动检测到变化并更新子组件的message
属性。ngOnChanges
方法会被调用,并提供一个changes
参数,其中包含了变化的信息。在这个示例中,我们简单地在控制台打印出了变化后的值。
通过这种方式,我们可以在父组件中的变化时捕获并处理子组件的更新。