在Angular中,可以通过使用ngOnChanges
生命周期钩子来订阅@Input
对象的变化。以下是一个包含代码示例的解决方法:
在子组件中,使用ngOnChanges
钩子来订阅@Input
对象的变化:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child-component',
template: '{{ inputValue }}
'
})
export class ChildComponent implements OnChanges {
@Input() inputObject: any;
inputValue: string;
ngOnChanges(changes: SimpleChanges) {
if (changes.inputObject) {
this.inputValue = changes.inputObject.currentValue;
}
}
}
在父组件中,通过给子组件的inputObject
属性绑定一个变量来传递输入对象,并在父组件中修改这个变量的值来触发子组件的变化:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
inputObject: string = 'Initial Value';
changeInputValue() {
this.inputObject = 'New Value';
}
}
在这个例子中,当点击按钮时,父组件中的inputObject
值发生改变,触发子组件的ngOnChanges
钩子,并更新子组件的inputValue
属性。子组件的模板中显示inputValue
的值。
下一篇:Angular订阅变量不显示