路由angular时的堆栈订阅

Question

我有一个调用Observable服务的方法。我订阅它，然后在导航时销毁它，但是当我返回时，我的方法堆栈结果

注意:Angular CLI: Version 13.0.2 | npm 8.1.0

//home component

public workList:workModel[] = [];
serviceSubscription:Subscription;
constructor(
public workService: WorkServices
) {
this.serviceSubscription = this.getWorkList();
}

ngOnInit(): void {
//this.serviceSubscription = this.getWorkList();
}
ngOnDestroy(): void {
this.serviceSubscription.unsubscribe();
}
getWorkList(){
this.workList = [];
return this.workService.getWorks().subscribe((resp:Array<workModel>) => {
this.workList = resp.reverse();
console.log("work list ->", this.workList);
})
}

//**************************************************************
//service
@Injectable({
providedIn: 'root'
})
export class WorkServices {
private URL = "http://localhost:3000/work";
private works:workModel[];
constructor(
public http:HttpClient
){
this.works = new Array<workModel>();
}
getWorks(){
return this.http.get(this.URL).pipe(map((resp:any) => {
resp.forEach((w:workModel) => {
this.works.push(new workModel(
w.description,
w.client,
w.employees,
w.materials,
w.isFinished,
w.cost,
w.id
)) 
})
return this.works;
}));
}
/*
Console
work list -> Array [ {…}, {…} ] // load page
work list -> Array(4) [ {…}, {…}, {…}, {…} ] // Navigate and back first time
work list -> Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ] // Navigate and back second time
*/

Answer 1

显然结果缓存在您的服务中，在works数组中。如果不需要这种行为，那么您可以简单地从服务中删除works属性，并从getWorks方法中删除它的使用:

getWorks() {
return this.http.get(this.URL).pipe(
map((resp: any) => resp.map((w: workModel) =>
new workModel(
w.description,
w.client,
w.employees,
w.materials,
w.isFinished,
w.cost,
w.id
))
)
);
}

Answer 2

我没有看到你销毁这个可观察对象，works数组在服务中，而且服务没有被销毁。所以它保存了数据。有三种方法可以解决这个

1. 当组件被销毁时清除工作数组。

2. 在组件的provider数组中包含service，这样服务实例就会随着组件一起被销毁。

   @Component({providers:[WorkServices]})
   

3. 每次调用getWorks时重新初始化works数组

解决方案完全取决于您的用例。理想情况下，工作数组不应该在服务中管理，直到你有一个特殊的场景。