angular - Angular：从输入（）获取更改

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);
  }

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

在您的模板 HTML 中：

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

2 回答 2