[英]Angular 2: how do I detect attribute changes to input attributes on a Component?
我有一个Angular 2 Controller,它看起来像这样:
@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
});
}
}
但是当值的value
从模板绑定更改时:
<my-component [value]="someValue" /> <!-- valueChange not triggered! -->
valueChange
事件未被触发,因此即使模板正确更新并显示新值,组件也不知道它已被更改。
如何检测控制器上的输入属性何时更改?
在我看来, Output
是你的组件向其他人发出事件所以他们会在必要时更新他们的视图,它应该只用于内部需要广播的更改(因此名称为Output
)。 在Input
更改上触发Output
事件可能会导致意外行为(因为现在内部和外部的所有更改都会触发valueChange
,而不再是Output
)。
在你的情况下,如果你想在value
变化时做一些事情,你可以把它变成一个二传手:
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!
}
我已经使用setter来检测输入变量何时被修改。 您必须使用@Component
装饰器中的inputs
键而不是@Input
声明来使其工作,如下所示:
@Component({
selector: 'my-component',
template: '<div>The value is: {{ value }}</div>',
inputs: ['value']
})
class MyComponent {
private _value: string;
@Output
valueChange = new EventEmitter<number>();
set value(value) {
this._value = value;
console.log('new value:', value);
this.valueChange.emit(value);
}
get value(value) {
return this._value;
}
}
另外,FYI,类方法是ngOnInit
而不是onInit
。
我已经能够通过OnChanges
实现解决这个问题:
ngOnChanges(changes) {
for (let key in changes) {
if (this[key + 'Change'])
this[key + 'Change'].emit(changes[key].currentValue);
}
}
只要Angular检测到Change
它就会自动触发Change
事件......但有没有办法本机地执行此操作?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.