当用户离开页面/路由时执行一个方法：Angular2

Question

每当当前路线发生变化时，我都会尝试运行一个函数。例如，如果我们当前在“..../user/user-details”上，其中 user-details 是一个单独的组件。我想在路由更改时执行一个方法（路由是从 UI 更改还是直接从 URL 更改都无关紧要）。 我在用户详细信息组件中做了一些事情：

constructor(private router: Router) {
  router.events.subscribe(() => {
    console.log('Route changed');
 });
}

但是这种方法的问题是，它会在每次路线更改时运行（无论我们是否导航到用户详细信息页面或从用户详细信息页面导航）。所以这是订阅应用程序范围的路线。我只是希望它在我们离开用户详细信息组件时运行。他们有办法做到这一点吗？

Answer 1

如果您只想在离开用户详细信息组件时运行代码，那么您需要在路由上创建一个CanDeactivate Guard。

设置守卫，以便UserDetailsComponent 实现一个接口，其中包含在路由被停用之前调用的方法。然后在路由上注册CanDeactivateGuard，在Guard内部调用路由上的方法。

interface BeforeUnload {
    beforeunload(): Observable<boolean>|Promise<boolean>|boolean;
}

@Component({ /* ... */})
class UserDetailsComponent implements BeforeUnload {
    beforeUnload() {
        /* ... custom code ... */
        return true;
    }
}

@Injectable()
class CanDeactivateComponent implements CanDeactivate<T extends BeforeUnload> {
  constructor() {}

  canDeactivate(
    component: T,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return component.beforeUnload();
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'user/user-details',
        component: UserDetailsComponent,
        canDeactivate: [CanDeactivateComponent]
      }
    ])
  ],
  providers: [CanDeactivateComponent]
})
class AppModule {}

在本例中，我进行了设置，以便在组件上的方法返回响应之前路由不会离开，但您可以立即返回 true，具体取决于 beforeUnload 是否同步。