Angular路由切换时如何在不使用OnDestroy的情况下取消订阅

针对你的代码，要在NavigationEnd事件触发时取消订阅，直接在注释位置调用订阅对象的unsubscribe()方法即可。需要注意确保订阅对象已初始化，避免出现未定义错误：

this.RouteSub = router.events.pipe(
    filter(event => event instanceof NavigationEnd)
).subscribe((val) => {
    let isnav: boolean = false;
    if (val instanceof NavigationEnd) {
        // 取消当前路由事件的订阅
        this.RouteSub?.unsubscribe();
        
        // 若你还需取消mailService相关的订阅（假设之前有订阅实例）
        // this.mailSub?.unsubscribe();
        
        this.mailService.changeOrgin.next();
        this.mailService.changeOrgin.complete();
    }
});

补充方案： #

如果你的需求是执行一次逻辑后自动停止监听，无需手动调用unsubscribe()，可以使用take(1)操作符，它会在收到第一个事件后自动完成订阅并清理资源：

router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    take(1)
).subscribe((val) => {
    this.mailService.changeOrgin.next();
    this.mailService.changeOrgin.complete();
});

这种方式同样不需要依赖OnDestroy生命周期钩子，由RxJS自动管理订阅生命周期。

内容的提问来源于stack exchange，提问作者user18002227