在Angular中,可以使用ngOnChanges
生命周期钩子来检测属性的变化。以下是一个示例代码:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
{{ title }}
Previous value: {{ previousValue }}
Current value: {{ currentValue }}
`,
})
export class MyComponent implements OnChanges {
@Input() title: string;
previousValue: string;
currentValue: string;
ngOnChanges(changes: SimpleChanges) {
if (changes.title) {
this.previousValue = changes.title.previousValue;
this.currentValue = changes.title.currentValue;
}
}
}
在上面的示例中,MyComponent
组件包含一个title
输入属性。ngOnChanges
方法会在输入属性发生变化时被调用,并接收一个SimpleChanges
对象作为参数。我们可以在这个方法中访问到输入属性的先前值和当前值,并将它们存储在组件的属性中。
在组件的模板中,我们可以通过插值表达式{{ }}
来显示先前值和当前值。
要使用这个组件,只需在父组件的模板中使用
标签,并绑定title
属性:
请注意,[title]
是将myTitle
属性绑定到title
输入属性的方式。当myTitle
属性发生变化时,ngOnChanges
方法将被调用,并更新显示的先前值和当前值。
希望这个示例能帮助到你!