2017-07-26 25 views
6

Từ sự hiểu biết của tôi về Angular và RxJs có hai cách để chấm dứt các Observables. Bạn có thể unsubscribe() từ họ hoặc sử dụng takeUntil()complete(). Dưới đây là các ví dụ về mỗi cách tiếp cận (trong mã giả).Góc - cách ưu tiên để chấm dứt các Đài quan sát là gì?

Các unsubscribe() phương pháp

private _id: number; 
private _subscriptions: Subscription[] = []; 

constructor(private _route: ActivatedRoute) { 
    this._getId(); 
} 

public ngOnDestroy(): void { 
    this._subscriptions.forEach(
     subscription => subscription.unsubscribe() 
    ); 
} 

private _getId(): void { 
    this._subscriptions.push(
     this._route.params.subscribe(params => this._id = +params['id']) 
    ); 
} 

Các takeUntil() và đầy đủ() phương pháp

private _id: number; 
private _ngUnsubscribe: Subject<void> = new Subject<void>(); 

constructor(private _route: ActivatedRoute) { 
    this._getId(); 
} 

public ngOnDestroy(): void { 
    this._ngUnsubscribe.next(); 
    this._ngUnsubscribe.complete(); 
} 

private _getId(): void { 
    this._route.params.takeUntil(this._ngUnsubscribe).subscribe(
     params => this._id = +params['id'] 
    ); 
} 

Trong góc, là có một cách ưa thích để chấm dứt quan sát?

+2

Cách thích hợp nhất là trong 'ngOnDestroy', mà bạn đang làm. Điều duy nhất tôi có thể thêm là kiểm tra xem các giá trị có "trung thực" hay không, nghĩa là không null hoặc không được xác định, nếu không bạn sẽ gặp lỗi khi cố gắng gọi 'unsubscribe()'. – Lansana

+1

Và lưu ý rằng bạn thường không cần phải chấm dứt các quan sát phổ biến, chẳng hạn như các thông số bộ định tuyến trong ví dụ của bạn. Góc tự động chấm dứt chúng. Xem ghi chú ở gần cuối phần này của tài liệu: https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-information – DeborahK

+1

xem [câu trả lời này] (https://stackoverflow.com/a/41177163/2545680) –

Trả lời

4

Cả hai cách tiếp cận đều chính xác mặc dù chúng không tương đương nhau.

Theo ý kiến ​​của tôi (và kinh nghiệm) sử dụng unsubscribe() thường có ý nghĩa hơn và rõ ràng hơn đối với các nhà phát triển khác không có nhiều kinh nghiệm với RxJS.

Sử dụng takeUntil() được đề xuất bởi nhà phát triển chính của RxJS 5 (https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87) và đôi khi dễ sử dụng hơn so với xử lý nhiều đối tượng đăng ký. Ví dụ: nếu bạn sử dụng toán tử partition() để tách một luồng thành hai luồng thì việc sử dụng chỉ takeUntil(...).partition(...) trở nên dễ dàng hơn.

Tuy nhiên có hai điều quan trọng:

  1. Hai là không giống nhau. Nếu bạn sử dụng takeUntil() bạn đang hoàn thành chuỗi quan sát có nghĩa là tất cả các xử lý hoàn chỉnh được gọi là tiếp theo là các chức năng rách. Mặt khác, khi bạn gọi unsubscribe() chỉ các chức năng rớt xuống được gọi (bao gồm các toán tử như finally()).

    Đây là lý do tại sao tôi cho rằng sử dụng unsubscribe() có ý nghĩa hơn. Với takeUntil(), bạn có thể có trình xử lý complete được gọi ngay cả khi bạn chỉ muốn hủy đăng ký (không đề cập đến các toán tử kích hoạt này hoạt động với tín hiệu complete chẳng hạn như repeat() có thể đăng ký lại). Thực tế bạn muốn hủy đăng ký không có nghĩa là nguồn quan sát đã hoàn thành. Bạn chỉ cần không quan tâm nhiều hơn về giá trị của nó vì vậy nó có thể tốt hơn để sử dụng unsubscribe() trong trường hợp này.

    Tuy nhiên, trong thực tế, việc bạn hoàn thành chuỗi hoặc chỉ hủy đăng ký thường không quan trọng.

  2. Bạn có thể soạn Subscription s vào một duy nhất và huỷ đăng ký tất cả chúng cùng một lúc:

    const subscription = new Subscription(); 
    
    const sub1 = Observable...subscribe(...); 
    const sub2 = Observable...subscribe(...); 
    const sub3 = Observable...subscribe(...); 
    
    subscription.add(sub1).add(sub2).add(sub3); 
    
    ... 
    
    subscription.unsubscribe(); // unsubscribes all of them 
    
0

Cách tôi làm điều này là trước tiên hãy kiểm tra trên ngOnDestroy, nếu có thể quan sát được. Nếu có, hãy hủy đăng ký. Sau đây là đoạn mã từ ứng dụng của tôi.

accountSubscriptionObj : Subscription; 

ngOnDestroy() { 
    if (this.accountSubscriptionObj) { 
     this.accountSubscriptionObj.unsubscribe(); 
    } 
    } 

Trong khi đó, bạn không cần hủy đăng ký khỏi ống Async, @HostListener, Quan sát hữu hạn. Khi thành phần bị hủy, đường ống không đồng bộ sẽ tự động hủy đăng ký để tránh rò rỉ bộ nhớ tiềm ẩn. Khi bạn có một chuỗi hữu hạn, thông thường bạn không cần phải hủy đăng ký, ví dụ: khi sử dụng dịch vụ HTTP hoặc bộ đếm thời gian có thể quan sát được. Để tham khảo thêm read here.

Các vấn đề liên quan