I have a subscription where I get some messages from the store to output toastr.

I unsubscribed by subscribe .unsubscribe().

How can check that I have really unsubscribe?

  subscription!: Subscription;

  ngOnInit(): void { }

  toastrError(): void {
    this.subscription = this.store.select(getMessage).subscribe(m => {
      (m.message && m.title) ? this.toastr.error(m.message, m.title) : null;
    });
  }

  singIn(): void {
    this.toastrError();
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

CodePudding user response：

A component instance has a lifecycle that begins when Angular instantiates the component class and renders the component view (along with its child views). The lifecycle continues with some change detection, as Angular checks to see when data-bound properties change, and in response updates both the view and the component instance when needed. The lifecycle ends when Angular actually destroys the component instance and removes its rendered template from the DOM, so the ngOnDestroy is called immediately before Angular destroys the component (or directive).

If you want to make sure the unsubscription is actually occurring, you can either add a log at the ngOnDestroy method or debug it in the browser.

CodePudding user response：

I think you can use the closed flag after unsubscribe() to validate it. As example

if(!this.subscription.closed)
      console.error("Some error unsubscribing ?!");

If you mean validating outside the component then you probably cannot as the ngOnDestroy will be called only before component instance destruction. You might try to emit an event here but probably will be late to check it !

However, as good practice, you may define a subject in your component and use it to cancel all of your subscriptions using takeUntil(). As example

export class LoginComponent implements OnInit, OnDestroy {

  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get("http://whatever")
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => console.log(value));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Check this question for difference between such methods

Angular RxJS Observable: takeUntil vs. unsubscribe with a Subscription

CodePudding user response：

I'm guessing you could see that you unsubscribed if no more error toasts would show up. But I get your point. You could either log the ngOnDestroy method to be sure it will run and thus, unsubscribe.

Or you could debug it with something like the demo I've come up with here. By showing/hiding the child component, you're able to see the subscription that is logging a 'ping' message, starts and stops accordingly.

CodePudding user response：

1. At first do not write like this use Services.
2. You can use takeUntil like in this example.

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x  import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
  private ngUnsubscribe = new Subject();

  constructor(private booksService: BookService) { }

  ngOnInit() {
    this.booksService.getBooks()
      .pipe(
        startWith([]),
        filter(books => books.length > 0),
        takeUntil(this.ngUnsubscribe)
      )
      .subscribe(books => console.log(books));

    this.booksService.getArchivedBooks()
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(archivedBooks => console.log(archivedBooks));
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}