Angular 2：如何检测组件上输入属性的属性更改？

发布时间：2020-12-17 07:34:58 所属栏目：安全来源：网络整理

导读：我有一个Angular 2控制器,看起来像这样： @Component({ selector: 'my-component',template: 'divThe value is: {{ value }}/div',})class MyComponent implements OnInit { @Input() value: string; @Output valueChange = new EventEmitternumber(); ngOnI

我有一个Angular 2控制器,看起来像这样：

@Component({
  selector: 'my-component',template: '<div>The value is: {{ value }}</div>',})
class MyComponent implements OnInit {
  @Input()
  value: string;

  @Output
  valueChange = new EventEmitter<number>();

  ngOnInit() {
    this.valueChange.subscribe(value => {
      console.log('new value:',value); // <-- does not get triggered
    });
  }
}

但是当值的值从模板绑定更改时：

<my-component [value]="someValue" /> <!-- valueChange not triggered! -->

valueChange事件未被触发,因此即使模板正确更新并显示新值,组件也不知道它已被更改.

如何检测控制器上的输入属性何时更改？

在我看来,输出是你的组件向其他人发出事件所以他们会在必要时更新他们的视图,它应该只用于内部需要广播的更改(因此名称为Output).在输入更改上触发输出事件可能会导致意外行为(因为现在内部和外部的所有更改都会触发valueChange,而不再是输出).

在你的情况下,如果你想在价值变化时做一些事情,你可以把它变成一个设定者：

private _value: string;
get value(): string {
  return this._value;
}

@Input('value')
set value(val: string) {
  this._value = val;
  console.log('new value:',value); // <-- do your logic here!
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!