通过使用 ngOnChanges 钩子和 SimpleChanges 对象,可以在 @Input() 值更改时触发更新。为了确保更新发生,可以通过在父组件中创建一个 setter 方法来更新 @Input() 属性。
下面是一个演示如何更新 @Input() 属性的示例代码:
子组件:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: `{{message}}`
})
export class ChildComponent implements OnChanges {
@Input() message: string;
ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let change = changes[propName];
if (propName === 'message') {
this.message = change.currentValue;
}
}
}
}
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
myMessage = "Hello World!";
updateMessage() {
this.myMessage = "Updated Message";
}
}
在这个示例中,当点击按钮时,父组件中的 myMessage 属性将被更新,从而更新子组件中的 message 属性。ngOnChanges
钩子在属性更改时会触发更新,从而确保子组件中的 message 属性与父组件中的 myMessage 属性一致。
注意,这个示例只是一个简单的演示,实际应用中可能需要更复杂的逻辑。