Отказ от подписки в Angular

Question

У меня есть код, в котором я получаю некоторые данные с помощью HttpClient. Я подписан на метод, который возвращает эти данные. Что, если получение этих данных слишком длинное, например, восемь секунд и когда инициализируется домашний компонент, тогда процесс извлечения данных начинается с помощью метода жизненного цикла ngOnInit. Но что, если пользователь после запуска этого процесса, который занимает 8 секунд, перейдет на другую страницу через 2 секунды? Я не хочу, чтобы подписка продолжалась, потому что она больше не будет нужна, потому что те данные, которые я хочу отображать в компоненте compo, а не на другой странице. Я пробовал это, где с помощью setTimeOut я имитирую, что 8 секунд берут из бэкэнда, но это не работает. Когда я go перехожу на другую страницу, я получаю данные в консоли, поэтому выборка выполняется до конца

 constructor(public mainService: MainService) { }

subscription: Subscription;
ngOnInit() {
      this.subscription = this.mainService.getAllPosts().subscribe(x => {
      setTimeout(() => {
        console.log(x);
      }, 8000);
    });
}

 ngOnDestroy() {
    this.subscription.unsubscribe();
    console.log("destroyed");
  }


//service method
  getAllPosts() : Observable<any[]> {
    return this.http.get<any[]>(this.url);
  }

Answer 1

То, что вы делаете, хорошо, вот код, с которым вы хотите его протестировать:

constructor(public mainService: MainService) {}

subscription: Subscription;
ngOnInit() {
    this.subscription = this.mainService.getAllPosts().subscribe(x => {
        console.log(x);
    });
}

ngOnDestroy() {
    this.subscription.unsubscribe();
    console.log("destroyed");
}


//service method
getAllPosts(): Observable<any[]> {
    return this.http.get<any[]>(this.url).pipe(delay(8000));
}

Answer 2

Я не знаю, что вы делаете с данными, но вы можете использовать asyn c pipe, чтобы обрабатывать одну наблюдаемую особенность asyn c pipe будет автоматически отписываться при уничтожении компонента.

component

data$:Observable<any>;
ngOnInit() {
      this.data$ = this.mainService.getAllPosts()
}

template

{{data$ | async | json }} jsut an example 

asyn c pipe подпишется и получает данные и отписывается, когда компонент уничтожить