我试图取消订阅一个可观察的角度但我收到错误，例如取消订阅不存在

Posted 2023-03-13

【中文标题】我试图取消订阅一个可观察的角度但我收到错误，例如取消订阅不存在

【英文标题】：I tried to do unsubscribe from an observable in angular But I am getting error like unsubscribe does not exists

【发布时间】：2022-01-20 09:02:25

【问题描述】：

下面是组件之一的代码。 编译有问题：X

错误

merge/merge.component.ts:75:12 - 错误 TS2551：“可观察”类型上不存在属性“取消订阅”。您指的是“订阅”吗？

75 出$().unsubscribe() ~~~~~~~~~~~

../../node_modules/rxjs/dist/types/internal/Observable.d.ts:53:5 53 订阅（观察者？：部分）：订阅； ~~~~~~~~~ 'subscribe' 在这里声明。

import  Component, ElementRef, OnDestroy, OnInit, ViewChild  from '@angular/core';
import  defer, Observable, of, Subscription  from 'rxjs';
import  HttpClient  from '@angular/common/http';
import filter,map,distinctUntilChanged,distinctUntilKeyChanged, mergeAll, mergeMap, concatAll, retry, repeat from 'rxjs/operators'
import from from 'rxjs';

@Component(
  selector: 'app-merge',
  templateUrl: './merge.component.html',
  styleUrls: ['./merge.component.scss']
)
export class MergeComponent implements OnInit 
   public items:any[]=[];
   constructor(private http: HttpClient)

  ngOnInit(): void 
    let counter=1;
    const out$=()=> defer(()=>this.http.get('https://jsonplaceholder.typicode.com/todos/'+counter++)).pipe(
      repeat(4)
    );
    out$().subscribe(
      data => console.log(data)
    )
    out$().unsubscribe()

【问题讨论】：

我们取消订阅，所以你得到的错误是正确的:)

【参考方案1】：

subscribe() 方法返回一个订阅，你必须取消订阅。为了让它更有用，你应该在 ngOnDestroy 中存储它并取消订阅这个订阅：

export class MergePageComponent implements OnInit, OnDestroy 

  protected mySubscription: Subscription;
  
  constructor(  )

  ngOnInit(): void 
    ...
    this.mySubscription = out$().subscribe(
      data => console.log(data)
    );
  

  ngOnDestroy(): void 
    this.mySubscription.unsubscribe();
  

【参考方案2】：

可观察对象没有取消订阅方法。当你订阅一个 observable 时，它​​会给你一个订阅。然后您可以取消订阅。

const mySubscription = out$().subscribe(
  data => console.log(data)
);
mySubscription.unsubscribe();