Question

在Angular 7组件中，我使用RxJS takeUntil（）正确取消可观察订阅的订阅。

方法NameError Traceback (most recent call last) <ipython-input-27-a0d6b4eea09ain <module>() 1 mersenne_primes = [(3, 1)] * 17 2 ----3 grader.score.ip__mersenne_primes(mersenne_primes) NameError: name 'grader' is not defined中缺少this.destroy$.next()时会发生什么（请参见下面的示例）？仍然可以正确取消订阅吗？
方法ngOnDestroy中缺少this.destroy$.complete()时会发生什么（请参见下面的示例）？仍然可以正确取消订阅吗？
是否有任何方法可以正确使用带takeUntil（）的模式来取消订阅（例如tslint规则，npm软件包）？

ngOnDestroy

Answer 1

takeUntil接下来是发射。如果仅调用complete()，则不会取消订阅

尝试一下：

const a=new Subject();
interval(1000).pipe(takeUntil(a)).subscribe(console.log);
timer(3000).subscribe(_=>a.complete())

this.destroy$仍在内存中，不会收集垃圾
不是我知道的

也请在这里看看，以免在使用takeUntil时出现内存泄漏

https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef

我个人更喜欢在销毁时明确使用unsubscribe

Answer 2

this.destroy$.next()触发主题，该主题触发完成takeUntil订阅的flightService.getAll()运算符。

this.destroy$.complete()完成组件销毁后的destroy$主题。

Answer 3

您好，请使用 takeWhile 代替 takeUntil 。

@Component({
    selector: 'app-flights',
    templateUrl: './flights.component.html'
})
export class FlightsComponent implements OnDestroy, OnInit {
    private readonly destroy$ = new Subject();
    alive = true;
    public flights: FlightModel[];

    constructor(private readonly flightService: FlightService) { }

    ngOnInit() {
        this.flightService.getAll()
            .pipe(takeWhile(() => this.alive))
            .subscribe(flights => this.flights = flights);
    }

    ngOnDestroy() {
        this.alive = false;
        this.destroy$.complete();
    }
}

Answer 4

这是一种更简单的方法：

private readonly destroy$ = new Subject<boolean>();

...

ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
}

使用takeUntil进行可观察的Angular销毁：ngOnDestroy中缺少.next（）时会发生什么

4 个答案: