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

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,具体取决于if beforeUnload是否同步.