Question

我正在尝试在当前路线发生变化时运行一个功能。例如，如果我们当前处于“.... / user / user-details”，那么用户详细信息是一个单独的组件。我想在路由更改时执行一个方法（如果路由从UI更改或直接从URL更改，则无关紧要）。我在用户详细信息组件中做了一些事情：

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

但是这种方法的问题是，它会在每次路由更改时运行（无论我们是否导航到用户详细信息页面或从用户详细信息页面导航）。所以这是订阅app宽的路线。我只是希望它在我们远离用户详细信息组件时运行。他们是这样做的吗？

Answer 1

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

设置防护，以便UserDetailsComponent在路由取消激活之前使用方法调用接口。然后在路线上注册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是否同步。

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

1 个答案: