在外部可观察对象上添加.pipe(takeUntil(this.destroy$))即可解决。
代码示例:
import { Component, OnDestroy } from '@angular/core';
import { Subject, Observable, interval } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent implements OnDestroy {
private readonly destroy$ = new Subject();
start() {
interval(1000)
.pipe(
takeUntil(this.destroy$),
switchMap(() => this.getData())
)
.subscribe({
next: value => console.log(value),
error: error => console.error(error),
});
}
stop() {
this.destroy$.next();
this.destroy$.complete();
}
getData(): Observable {
return new Observable(observer => {
observer.next('Data');
observer.complete();
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}