将与导航相关的代码放在哪里?

时间:2019-06-01 10:53:51

标签: angular angular-routing angular-router angular-route-guards

当前,我的AuthGuard构造函数中包含一个Redux状态更改的替换项。登录后,它将仅重定向到请求的原始页面。这是不正确的地方,但我不知道应该在哪里:

auth.guard.ts:

this.subscription = this.ngRedux.select<ILoginState>('login')
  .subscribe(newState => {
    if (newState.isLoggedIn) {
        let redirectUrl : string = ngRedux.getState().window.windowData.redirectUrl;
        if (!redirectUrl) {
          redirectUrl = '/map/' + this.tabService.sessionId;
        }
        this.router.navigate([redirectUrl]);
      }
  });

我还有其他与导航相关的内容,如下所示。目前,该服务位于一项旨在管理不同浏览器窗口并在它们之间进行状态同步的服务中:

/* track url changes and change redux state */
this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {   
    this.ngRedux.dispatch(this.windowActions.setOutletActiveRoute(event.urlAfterRedirects));
  }
});

两者都可以在core的新navigation-service.ts或app.component.ts中。我读了an article about not subscribing in angular service,所以也许没用。另外,将所有内容都放入app.component中听起来是个坏主意。我想将所有与导航相关的内容放到自己的位置以分开关注点。推荐什么方法?

1 个答案:

答案 0 :(得分:0)

创建一个app.navigator.ts文件并将导航逻辑放在此处,这不是服务或组件,而只是ts文件。

app.navigator.ts

......


/* track url changes and change redux state */
this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {   
    this.ngRedux.dispatch(this.windowActions.setOutletActiveRoute(event.urlAfterRedirects));
  }
});

......