如何取消订阅 Angular 服务创建的可观察对象

Question

我是 Angular 的新手，我的问题可能看起来很基础，但希望能提供一些指导。我目前正在编写一个应用程序来自学一些真正的开发技能。在我的应用程序中，我有一个 Angular 组件，它导入我编写的提供数据的服务。

这是我的组件

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css']
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
    
    constructor(public apiService: ApiService) {}
    public availableInstruments: any[];

    ngOnInit() {
        this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

    ngOnDestroy() {
    // how do I unsubscribe?
    }
}

这很简单，但是我应该尝试将 this.apiService.getInstruments.unsubscribe() 添加到 ngOnDestroy 块吗？我收到错误消息 Property 'unsubscribe' does not exist on type => 可观察的'。我什至考虑过在 .subscribe() 之后添加 .unsubscribe() 就像链接一样，但这只会让我的页面挂起。我也没有错误。有人可以告诉我如何最好地取消订阅吗？我是否需要将 api 调用分配给一个变量，然后在 ngOnDestroy 块

中的变量名称上使用 .unsubscribe()

Answer 1

您不应取消订阅自动完成的可观察对象（例如 Http、调用）。但是有必要取消订阅像 Observable.timer() 这样的无限可观察量。

至于一般取消订阅，这是一个重复的问题，在这里回答 How to unsubscribe for an observable

Answer 2

为避免内存泄漏，您可以从 Observable 到 Subscription 退订。例如：

    subscription: Subscription;

    ngOnInit() {
        this.subscription = this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

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

或使用 async 管道：

打字稿：

    instruments$;

    ngOnInit() {
        this.instruments$= this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

HTML:

    <li *ngFor="let instr of instruments$ | async">
        {{ instr | json }} 
    </li>

Answer 3

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css'],
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
  subscription: Subscription;
  constructor(public apiService: ApiService) {}
  public availableInstruments: any[];

  ngOnInit() {
    this.subscription = this.apiService.getInstruments().subscribe((result) => {
      this.availableInstruments = result;
    });
  }

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

Answer 4

在 angular 中处理观察者的最新和更简洁的方法是在模板组件中使用异步管道，它将订阅和可观察对象的销毁委托给容器框架。您可以在此处找到更详细的示例（angular 文档）： https://angular.io/api/common/AsyncPipe

如何取消订阅 Angular 服务创建的可观察对象

How to unsubscribe from observable created by an Angular Service

angular

angular-observable

rxjs-observables