Angular:从input()中获取更改

Question

我有一个名为ftn-popin-opener的组件

<label>{{ selectedValue }}</label>

其中selectedValue是一个Input()

@Input() selectedValue: string;

在我使用ftn-popin-opener的另一个组件中，我想检测每次Input() selectedValue发生变化时:

<ftn-popin-opener
[selectedValue]='professionalSituation | titlecase'>
</ftn-popin-opener> 

我尝试使用ngOnChanges()但不工作

ngOnChanges(changes: SimpleChanges): void {
console.log(changes.professionalSituation.currentValue);
}

Answer 1

你必须在有@Input的组件中使用ngOnChanges生命周期方法，在你的情况下，你必须在popin-opener组件中使用它

Answer 2

我不确定professionalSituation在您的父组件中是如何处理的，但是，您可以在ftn-popin-opener组件中做的是拥有这样的@Inputsetter:

export class FtnPopinOpenerComponent {
myValue!: string;

@Input() set selectedValue(value: string) {
this.myValue = value;
}
}

在你的模板HTML中:

<label>{{ myValue }}</label>