如何取消订阅Angular Service创建的observable[副本]

Question

@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块，我会得到一个错误，即属性'unsubscribe'在type=>observable'上不存在。我甚至考虑在.subscribe()后面添加.unsubscribe()，就像链接一样，但这只会使我的页面挂起。我也没有错。有人能告诉我如何最好地退订吗？是否需要将api调用分配给变量，然后在ngondestroy块中的可变量名称上使用.unsubscribe（）

Answer 1

为了避免内存泄漏，可以通过subscription取消对observable的订阅。例如：

    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;
        });
    }

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