在同一個組件中取消訂閱observable但具有動態引數

FILTER SERVICE - 可觀察到基本資料過濾

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Filter } from '../../models/filter.model';
import { Convert } from '../../utils/converter';

@Injectable({
  providedIn: 'root'
})
export class FilterService {

  private currentFilter$ = new BehaviorSubject<Filter>({
    page: 0,
    limit: 20
  });

  constructor() { }

  private init(name: string) {
    let filterStr = localStorage.getItem(name);
    if (filterStr) {
      this.currentFilter$.next(Convert.fromJson<Filter>(filterStr))
    } else {
      localStorage.setItem(name, Convert.ToJson<Filter>(this.currentFilter$.value));
    }
  }

  private saveFilter(name: string, filter: Filter) {
    this.currentFilter$.next(filter);
    localStorage.setItem(name, Convert.ToJson<Filter>(filter));
  }

  public getFilter(name: string) : Observable<Filter> {
    this.init(name);
    return this.currentFilter$;
  }

  public nextPage(name: string) {
    let filter = this.currentFilter$.value;
    filter.page = filter.page   1;
    this.saveFilter(name, filter);
  }

  public pageLimit(name: string, limit: number) {
    let filter = this.currentFilter$.value;
    filter.limit  = limit;
    this.saveFilter(name, filter);
  }

  public scroll() {
    let filter = this.currentFilter$.value;
    filter.limit  = 20;
    this.currentFilter$.next(filter);
  }

  public resetPage(name: string) {
    let filter = this.currentFilter$.value;
    filter.page = 0;
    filter.limit = 20;
    this.saveFilter(name, filter);
  }

  public search(name: string, search: string) {
    let filter = this.currentFilter$.value;
    filter.search = search;
    filter.page = 0;
    filter.limit = 20;
    this.saveFilter(name, filter);
  }

  public sort(name: string, column: string, direction: string) {
    let filter = this.currentFilter$.value;
    filter.limit = 20;
    filter.page = 0;
    if (direction != '') {
      filter.orderBy = column   ' '   direction;
    } else {
      filter.orderBy = undefined;
    }
    this.saveFilter(name, filter);
  }
}

DOCUMENT ROUTE - 此組件具有動態引數type：302 = 發票，306 = 交貨單等。

{ path: 'documents/:type', component: DocumentsComponent },

檔案組件

@Component({
  selector: 'app-documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.scss']
})
export class DocumentsComponent extends Unsubscriber implements OnInit {

  displayedColumns: string[] = ['number', 'customerName', 'date', 'paymentDate', 'settledStatus', 'net', 'vat', 'gross'];
  documentsDataSource: Document[] = [];
  sortColumn = '';
  sortDirection: SortDirection = '';
  searchText = '';
  title = '';
  filters?: FilterItem[] = [];
  type = 0;

  constructor(
    private documentsService: DocumentsService,
    private filterService: FilterService,
    private route: ActivatedRoute,
    private router: Router
  ) {
    super();
    this.route.params.subscribe((params) => {
      this.type = params["type"];
      this.title = this.getTitle(params["type"]);
     this.filterService.getFilter(`documents:${this.type}`).subscribe((filter) => {
        if (filter.orderBy) {
          this.sortColumn = filter.orderBy.split(" ")[0];
          this.sortDirection = filter.orderBy.split(" ")[1] === "asc" ? "asc" : "desc";
        }
        if (filter.search) {
          this.searchText = filter.search;
        }
        this.subscription.add(this.documentsService.getDocuments(filter, params["type"]).subscribe(result => {
          this.documentsDataSource = result;
        }));
      });
    });
  }

退訂

import { Injectable, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Injectable()
export abstract class Unsubscriber implements OnDestroy {

  subscription = new Subscription();

  constructor() { }

  ngOnDestroy(): void {
    console.log("unsubscribe");
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

結果- 隨著檔案背景關系中路由（引數）的每次更改，我都會獲得對過濾器和檔案的 1 訂閱，因為Unsubscriber從未呼叫過。如果我在不同的組件之間更改路線，比如Productsor Customers，然后回傳Documents一切都很好。

我應該如何解決這個問題？

uj5u.com熱心網友回復：

我在這里看到一些反模式，這可能是您問題的一部分。

您正在其他.subscribe()回呼中創建訂閱。應該始終通過將其他 RxJS 運算子鏈接switchMap在一起來避免這種情況。

this.subscription.add(this.route.params.pipe(
  switchMap((params) => {
    this.type = params["type"];
    this.title = this.getTitle(params["type"])

    return combineLatest([this.filterService.getFilter(`documents:${this.type}`), of(params])
  }),
  switchMap(([filter, params]) => {
    if (filter.orderBy) {
      this.sortColumn = filter.orderBy.split(" ")[0];
      this.sortDirection = filter.orderBy.split(" ")[1] === "asc" ? "asc" : "desc";
    }
    if (filter.search) {
      this.searchText = filter.search;
    }

    return this.documentsService.getDocuments(filter, params["type"])
  })
).subscribe(result => {
  this.documentsDataSource = result
}))

現在您只有 1 個訂閱可以添加到this.subscription.

標籤：有角度的 打字稿 rxjs

上一篇：Angular-如何在進行多次選擇后僅顯示/能夠單擊下一個螢屏按鈕

下一篇：使用pythontkinter將文本從一個按鈕移動到另一個按鈕