Angular Observable destroy with takeUntil：当 ngOnDestroy 中缺少 .next() 时会发生什么

Question

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

当方法 ngOnDestroy 中缺少 this.destroy$.next() 时会发生什么情况（参见下面的示例）？还会正常退订吗？
当方法 ngOnDestroy 中缺少 this.destroy$.complete() 时会发生什么（参见下面的示例）？还会正常退订吗？
有没有什么方法可以强制使用 takeUntil() 取消订阅的模式是否正确使用（例如 tslint 规则、npm 包）？


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

    public flights: FlightModel[];

    constructor(private readonly flightService: FlightService) { }

    ngOnInit() {
        this.flightService.getAll()
            .pipe(takeUntil(this.destroy$))
            .subscribe(flights => this.flights = flights);
    }

    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

Answer 1

takeUntil 将 next 作为发射。如果只有 complete() 调用它不会取消订阅

试试这个：

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

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

使用takeUntil.

时，请同时查看此处以避免内存泄漏

https://medium.com/angular-in-depth/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();
}

Angular Observable destroy with takeUntil：当 ngOnDestroy 中缺少 .next() 时会发生什么

Angular Observable destroy with takeUntil: What happens when .next() is missing in ngOnDestroy

unsubscribe

observable

rxjs

angular