在 Angular 2+ 中,自定义双向数据绑定(bind)可以通过使用 @Input
和 @Output
参数来完成。因此,如果我想让子组件与第三方插件通信,我可以按如下方式进行:
export class TestComponent implements OnInit, OnChanges {
@Input() value: number;
@Output() valueChange = new EventEmitter<number>();
ngOnInit() {
// Create an event handler which updates the parent component with the new value
// from the third party plugin.
thirdPartyPlugin.onSomeEvent(newValue => {
this.valueChange.emit(newValue);
});
}
ngOnChanges() {
// Update the third party plugin with the new value from the parent component
thirdPartyPlugin.setValue(this.value);
}
}
然后像这样使用它:
<test-component [(value)]="value"></test-component>
在第三方插件触发事件通知我们更改后,子组件通过调用 this.valueChange.emit(newValue)
更新父组件。问题是 ngOnChanges
然后在子组件中触发,因为父组件的值已更改,这导致调用 thirdPartyPlugin.setValue(this.value)
。但是插件已经处于正确状态,因此这可能是不必要/昂贵的重新渲染。
所以我经常做的是在我的子组件中创建一个标志属性:
export class TestComponent implements OnInit, OnChanges {
ignoreModelChange = false;
ngOnInit() {
// Create an event handler which updates the parent component with the new value
// from the third party plugin.
thirdPartyPlugin.onSomeEvent(newValue => {
// Set ignoreModelChange to true if ngChanges will fire, so that we avoid an
// unnecessary (and potentially expensive) re-render.
if (this.value === newValue) {
return;
}
ignoreModelChange = true;
this.valueChange.emit(newValue);
});
}
ngOnChanges() {
if (ignoreModelChange) {
ignoreModelChange = false;
return;
}
thirdPartyPlugin.setValue(this.value);
}
}
但这感觉像是一个 hack。
在 Angular 1 中,使用 =
绑定(bind)接收参数的指令有同样的问题。因此,我将通过要求 ngModelController
来完成自定义双向数据绑定(bind),这不会在模型更新后导致重新渲染:
// Update the parent model with the new value from the third party plugin. After the model
// is updated, $render will not fire, so we don't have to worry about a re-render.
thirdPartyPlugin.onSomeEvent(function (newValue) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(newValue);
});
});
// Update the third party plugin with the new value from the parent model. This will only
// fire if the parent scope changed the model (not when we call $setViewValue).
ngModelCtrl.$render = function () {
thirdPartyPlugin.setValue(ngModelCtrl.$viewValue);
};
这行得通,但是 ngModelController
似乎真的是为表单元素设计的(它内置了验证等)。所以在不是表单元素的自定义指令中使用它感觉有点奇怪。
问题:Angular 2+ 有没有在子组件中实现自定义双向数据绑定(bind)的最佳实践,在更新父组件后不会在子组件中触发 ngOnChanges
使用 EventEmitter
?或者我是否应该像在 Angular 1 中那样与 ngModel
集成,即使我的子组件不是表单元素?
提前致谢!
更新:我查看了Everything you need to know about change detection in Angular @Maximus 在评论中建议。看起来 ChangeDetectorRef
上的 detach
方法将阻止更新 template 中的任何绑定(bind),如果您遇到这种情况,这可能有助于提高性能。但它不会阻止 ngOnChanges
被调用:
thirdPartyPlugin.onSomeEvent(newValue => {
// ngOnChanges will still fire after calling emit
this.changeDetectorRef.detach();
this.valueChange.emit(newValue);
});
到目前为止,我还没有找到使用 Angular 的变更检测来完成此任务的方法(但我在这个过程中学到了很多东西!)。
我最终尝试使用 ngModel
和 ControlValueAccessor
。这似乎完成了我所需要的,因为它在 Angular 1 中的行为与 ngModelController
相同:
export class TestComponentUsingNgModel implements ControlValueAccessor, OnInit {
value: number;
// Angular will pass us this function to invoke when we change the model
onChange = (fn: any) => { };
ngOnInit() {
thirdPartyPlugin.onSomeEvent(newValue => {
this.value = newValue;
// Tell Angular to update the parent component with the new value from the third
// party plugin
this.onChange(newValue);
});
}
// Update the third party plugin with the new value from the parent component. This
// will only fire if the parent component changed the model (not when we call
// this.onChange).
writeValue(newValue: number) {
this.value = newValue;
thirdPartyPlugin.setValue(this.value);
}
registerOnChange(fn: any) {
this.onChange = fn;
}
}
然后像这样使用它:
<test-component-using-ng-model [(ngModel)]="value"></test-component-using-ng-model>
但同样,如果自定义组件不是表单元素,使用 ngModel
似乎有点奇怪。
最佳答案
也遇到了这个问题(或者至少是非常相似的问题)。
我最终使用了您上面讨论的 hacky 方法,但稍作修改后,我使用 setTimeout 来重置状态以防万一。
(就我个人而言,如果使用双向绑定(bind),则 ngOnChanges 主要是有问题的,因此如果不使用双向绑定(bind),setTimeout 可防止挂起 disableOnChanges)。
changePage(newPage: number) {
this.page = newPage;
updateOtherUiVars();
this.disableOnChanges = true;
this.pageChange.emit(this.page);
setTimeout(() => this.disableOnChanges = false, 0);
}
ngOnChanges(changes: any) {
if (this.disableOnChanges) {
this.disableOnChanges = false;
return;
}
updateOtherUiVars();
}
关于javascript - 防止 ngOnChanges 在发出事件后触发(Angular 2+),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43835220/