Angular：从输入（）获取更改答案

【问题标题】：Angular: get changes from input()Angular：从输入（）获取更改
【发布时间】：2021-11-22 04:15:50
【问题描述】：

我有一个名为 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);
  }

【问题讨论】：

【解决方案1】：

我不确定professionalSituation 在你的父组件中是如何处理的，但是，你可以在你的ftn-popin-opener 组件中做一个像这样的@Input 设置器：

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

在您的模板 HTML 中：

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

【讨论】：

【解决方案2】：

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

【讨论】：