路由角时堆栈订阅

Question

我有一种调用可观察服务的方法。我在导航时订阅并将其销毁，但是当我导航回到方法时

注意：Angular CLI：版本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

我看不到您破坏可观察到的可观察，工程阵列正在使用，服务也没有被摧毁。因此它保留数据。 有三种方法可以解决此

1. 当组件被破坏时，

   清晰的作品数组。

2. 在组件的提供商数组中加入服务，因此服务实例与组件破坏了。

     @component（{提供者：[Workservices]}））
    

3. 每次称为getWorks时重新引导作品数组。

该解决方案完全取决于您的用户酶。理想情况下，在您有特定方案之前，不应在服务中管理数组。