angular - 当用户离开页面/路由时执行方法 : Angular2

Question

每当当前路线发生更改时，我都会尝试运行一个函数。例如，如果我们当前位于“..../user/user-details”，其中 user-details 是一个单独的组件。我想在路由更改时执行一个方法(无论路由是从 UI 更改还是直接从 URL 更改都没有关系)。我在用户详细信息组件中做了一些事情:

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

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

Answer 1

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

设置防护，以便 UserDetailsComponent 实现一个接口(interface)，其中包含在路由停用之前调用的方法。然后在路由上注册 CanDeactivate 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 是否同步。