Где разместить код, связанный с навигацией, в угловом приложении?

Question

В настоящее время у меня в конструкторе AuthGuard ниже приведена подписка на изменение состояния редукции. Он просто перенаправит на исходную страницу, запрошенную после входа в систему. Это не правильное место, но я не знаю, где это должно быть:

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));
  }
});

Оба могут быть в новом navigation-service.ts в ядре или в app.component.ts. Я прочитал статью о том, что не подписывался на угловой сервис , так что, возможно, не сервис. Также помещать все в app.component кажется плохой идеей. Я хотел бы поместить все связанные с навигацией вещи на свое место, чтобы разделить проблемы. Какой будет рекомендуемый способ?

Answer 1

Создайте файл 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));
  }
});

......