检测Angular组件中的路线离开答案

【问题标题】：Detect route leave in component in Angular检测Angular组件中的路线离开
【发布时间】：2020-02-26 18:26:35
【问题描述】：

Vue 路由器具有非常有用的组件内保护 beforeRouteLeave，即引用：“当渲染此组件的路由即将被导航离开时调用。有权访问此组件实例”。

Angular 中有类似的东西吗？简而言之，我正在寻找方法，当用户因路由更改而离开组件时，该方法将在组件中调用。

【问题讨论】：

【解决方案1】：

你可以使用角度/路由模块

import { NavigationEnd, NavigationStart, Router } from '@angular/router';
constructor(
        private router: Router,
    ) {
        router.events.subscribe(
            (event) => {
                if ( event instanceof NavigationStart ) {
                    // Handle Navigation Start
                }

                if ( event instanceof NavigationEnd ) {
                    // Handle Navigation End
                }
            });
    }

旁注：如果你想控制它使用的生命周期钩子，你可以查看 Ionic。它们比 Angular 的核心生命周期钩子更直观一点。 https://ionicframework.com/docs/angular/lifecycle

【讨论】：

谢谢！通过一些额外的检查，我可以使用该方法。

【解决方案2】：

您可以使用ngOnDestroy() Lifecycle 挂钩来检查用户是否退出了可以在此处找到的视图 -> https://angular.io/guide/lifecycle-hooks

【讨论】：

谢谢，这对于很多情况来说都是很好的解决方案，但我的组件不会被破坏。

【解决方案3】：

如果你使用Router的方法navigateByUrl或navigate，那么在调用这个方法之前，你可以执行所需的任务。

例如，

     someMethod(){
        ....
        ....
        //desired functionality
        this.rouer.navigateByUrl(some path);
     }

【讨论】：