javascript – Angular2子组件在ngFor中意外销毁
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Angular2子组件在ngFor中意外销毁,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2005字,纯文字阅读大概需要3分钟。
内容图文
所以我有一个带有@Output事件的from的Component,它在提交时触发,如下所示:
@Component({
selector: 'some-component',
templateUrl: './SomeComponent.html'
})
export class SomeComponent{
@Input() data: any;
@Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();
constructor(private someService: SomeService) {}
submitForm(): void{
this.someService.updateBackend(this.data, ()=>{
this.onSubmit.emit();
});
}
}
我正在使用ngFor来创建此Component的多个元素:
<template let-data ngFor [ngForOf]="dataCollection">
<some-component [data]="data" (onSubmit)="doSomthing()"></some-component>
</template>
最后一个缺失的部分是提交时使用的服务:
@Injectable()
export class SomeService{
constructor() {}
updateBackend(data: any, callback: () => void): void{
/*
* updating the backend
*/.then((result) => {
const { errors, data } = result;
if (data) {
callback();
}
})
}
}
在submitForm()函数的开头,this.onSubmit.observers是一个包含一个观察者的数组,就像它应该的那样.
一旦它到达调用this.onSubmit.emit()的回调方法,this.onSubmit.observers就是一个包含ZERO观察者的数组.
我遇到了两种非常奇怪的行为:
>如果我删除了在SomeService.updateBackend中更新后端的实际调用,它完全正常,观察者仍然是一个包含一个观察者的数组!
>如果我保持对后端的实际调用但不使用ngFor并仅显示一个< some-element>它也可以很好地工作,将一个观察者保留在回调范围内的this.onSubmit.observers中!
知道我做错了什么吗?
提前致谢!
更新:
感谢@ StevenLuke关于记录someComponent的ngOnDestroy的评论,我发现它在发射之前被销毁了.
实际上,当SomeService.updateBackend完成时,它正在做的第一件事是销毁该组件的所有实例并重新创建它们!
这就是观察者改变的原因!为什么会这样?
解决方法:
如果在* ngFor中提供trackBy函数来标识dataCollection中的项,则不会销毁和初始化.你的模板是:
<some-component *ngFor="let data of dataCollection;trackBy:trackByFunction"
[data]="data" (onSubmit)="doSomthing()"></some-component>
trackByFunction看起来像:
trackByFunction(index, item) {
return item ? item.id : undefined;
}
因此,即使dataCollection中的项是新对象,如果其id与前一个集合中的id匹配,* ngFor将更新[data]但不会销毁并初始化该组件.
内容总结
以上是互联网集市为您收集整理的javascript – Angular2子组件在ngFor中意外销毁全部内容,希望文章能够帮你解决javascript – Angular2子组件在ngFor中意外销毁所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。