@angular/router#NavigationEnd TypeScript Examples

constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd))
            .subscribe(({ urlAfterRedirects }: NavigationEnd) => {
                !this.mapAuthUrls[location.pathname] ? localStorage.setItem('lastPageBeforeRegistrationOrLogin', location.pathname) : '' 
            });
    }

private navigateAndMoveToNextStep(
    currentStep: TourStep,
    tourInstance: Tour,
    tourState: TourState,
    index: number,
  ) {
    if (index < tourInstance.tourSteps.length - 1) {
      this.router.navigate([currentStep.nextRoute]);
      this.router.events.subscribe((event: NavigationEvent) => {
        const nextStep = tourInstance.tourSteps.filter(
          ts => ts.id === currentStep.nextStepId,
        )[0];
        if (
          event instanceof NavigationEnd &&
          event.url === nextStep.currentRoute
        ) {
          this.moveToNextStep(tourInstance, tourState, currentStep, index);
        }
      });
    } else {
      this.moveToNextStep(tourInstance, tourState, currentStep, index);
    }
  }

navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.isLoading = true;

      // Toogle navbar collapse when clicking on link
      const navbarCollapse = $('.navbar-collapse');
      if (navbarCollapse != null) {
        navbarCollapse.collapse('hide');
      }
    }
    if (event instanceof NavigationEnd) {
      this.isLoading = false;
    }

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.isLoading = false;
    }
    if (event instanceof NavigationError) {
      this.isLoading = false;
    }
  }

ngOnInit(): void {
    this.route.queryParams
      .subscribe((queryParams) => {
        if (queryParams.theme) {
          this.settingsService.setTheme(queryParams.theme)
        }
        else {
          this.settingsService.setTheme(getSessionStorage('--app-theme'))
        }

        if (queryParams.sidebar) {
          this.settingsService.setSideBar(queryParams.sidebar)
        }
        else {
          this.settingsService.setSideBar(getSessionStorage('--app-theme-sidebar'))
        }

        if (queryParams.header) {
          this.settingsService.setHeader(queryParams.header)
        }
        else {
          this.settingsService.setHeader(getSessionStorage('--app-theme-header'))
        }
      })
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {

      }
      if (event instanceof NavigationEnd) {
        if (!this.appLoaded) {
          (<any>window).appBootstrap()
          this.appLoaded = true
        }
      }
      if (event instanceof NavigationCancel) {

      }
    })
  }

pageView = createEffect(
    () => () =>
      this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd),
        tap((event: NavigationEnd) => {
          (<any>window).ga('set', 'page', event.urlAfterRedirects);
          (<any>window).ga('send', 'pageview');
        })
      ),
    { dispatch: false }
  );

ngOnInit(): void {
    this.routerEventSubscription = this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.getTitle(this.router.routerState, this.router.routerState.root).join(' - ')),
      )
      .subscribe(title => this.titleService.setTitle(title));

    this.tenant$ = this.store.select(fromRoot.getTenant);
    this.username$ = this.store.select(fromRoot.getUsername);

    this.menuService.onItemClick().subscribe(event => {
      this.onContecxtItemSelection(event.item.title);
    });
  }

private handleRouterState(): void {
    this.router.events.pipe(takeUntil(this.subscription$)).subscribe((event: RouterEvent) => {
      if (event instanceof NavigationEnd || event instanceof RouteConfigLoadEnd) {
        // Hide progress spinner or progress bar
        this.currentRoute = event.url;
        if (this.currentRoute === '/404') {
          this.isFooterVisible = false;
        }
        setTimeout(() => {
          this.document.body.classList.remove('body--loading');
        }, 2000);
      }
    });
  }

/**
   * 检测路由导航事件
   */
  detectNavigation() {
    this.router.events.subscribe((event: Event) => {
      switch (true) {
        case event instanceof NavigationStart:
          this.globalData.navigating = true;
          break;

        case event instanceof NavigationCancel:
          this.feedbackService.slightVibrate(); // 如果路由返回被取消，就震动一下，表示阻止

        case event instanceof NavigationEnd:
        case event instanceof NavigationError:
          this.globalData.navigating = false;
          break;
      }
    });
  }

private navigateAndMoveToPrevStep(
    currentStep: TourStep,
    tourInstance: Tour,
    tourState: TourState,
    index: number,
    removedSteps: TourStep[],
  ) {
    let moveToLastRemovedStep = false;
    if (index === 0 && removedSteps.length) {
      moveToLastRemovedStep = true;
    }
    const prevRoute = moveToLastRemovedStep
      ? removedSteps[removedSteps.length - 1].prevRoute
      : currentStep.prevRoute;
    this.router.navigate([prevRoute]);
    this.router.events.subscribe((event: NavigationEvent) => {
      let prevStep: TourStep;
      if (moveToLastRemovedStep) {
        prevStep = removedSteps[removedSteps.length - 1];
      } else {
        prevStep = tourInstance.tourSteps.filter(
          ts => ts.id === currentStep.prevStepId,
        )[0];
      }

      if (
        event instanceof NavigationEnd &&
        event.url === prevStep.currentRoute
      ) {
        this.moveToPrevStep(
          tourInstance,
          tourState,
          currentStep,
          index,
          removedSteps,
        );
      }
    });
  }

public watchWhitelist(): Observable<boolean> {
    return combineLatest([
      this.walletConnectorService.addressChange$,
      this.userAddress$,
      this.router.events.pipe(filter(e => e instanceof NavigationEnd))
    ]).pipe(
      switchMap(() =>
        from(
          this.web3PublicService[this.blockchain].callContractMethod<boolean>(
            this.lpContractAddress,
            LP_PROVIDING_CONTRACT_ABI,
            'viewWhitelistInProgress'
          )
        )
      ),
      tap(isWhitelistInProgress => {
        const isWhitelistUser = this.checkIsWhitelistUser(this.userAddress);
        const isOnDepositForm = this.router.url.includes('deposit');

        this.zone.run(() => {
          this._isWhitelistInProgress$.next(isWhitelistInProgress);
          this._isWhitelistUser$.next(isWhitelistUser);
        });

        if (!isWhitelistUser && isWhitelistInProgress && isOnDepositForm) {
          this.window.location.assign(this.window.location.origin + '/liquidity-providing');
        }

        if (isWhitelistUser && isWhitelistInProgress && isOnDepositForm) {
          this.setDepositType(DepositType.WHITELIST);
        }
      }),
      takeUntil(this._stopWhitelistWatch$)
    );
  }

ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.loading$.next(true);
      }
      if (event instanceof NavigationEnd) {
        this.loading$.next(false);
      }
    });
  }

constructor(public dataModelService: DataSourceService,
                private alertService: AlertService,
                private route: ActivatedRoute,
                private spinnerService: SpinnerService,
                private router: Router) {

        this.navigationSubscription = this.router.events.subscribe(
            (e: any) => {
                if (e instanceof NavigationEnd) {
                    this.ngOnInit();
                }
            }, (err) => this.alertService.addError(err)
        );

    }

constructor(private  router: Router, private cdr: ChangeDetectorRef) {
    this.router.events.subscribe(evt => {
      // 表示在惰性加载某个路由配置前触发的事件。
      if (!this.isFetching && evt instanceof RouteConfigLoadStart) {
        this.isFetching = true;
        this.cdr.markForCheck();
      }
      if (!this.isFetching && evt instanceof NavigationStart) {
        this.isFetching = true;
        this.cdr.markForCheck();
      }
      if (evt instanceof NavigationError || evt instanceof NavigationCancel) {
        this.isFetching = false;
        if (evt instanceof NavigationError) {
        }
        this.cdr.markForCheck();
        return;
      }
      if (!(evt instanceof NavigationEnd || evt instanceof RouteConfigLoadEnd)) {
        return;
      }
      if (this.isFetching) {
        setTimeout(() => {
          this.isFetching = false;
          this.cdr.markForCheck();
        }, 600);
      }
    });
  }

private loadParamsUrl(): void {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.route.params.subscribe((params) => {
          if (this.userId !== params.userId) {
            this.userId = params.userId;
            this.loadUser(this.userId);
          }
        });
      }
    });
  }

constructor(
    public i18n: I18nService,
    private breakpointObserver: BreakpointObserver,
    private router: Router,
    private logger: LoggerService,
    ) {
      this.router.events.subscribe(value => {
        if ( value instanceof NavigationEnd) {
          this.redirectedUrl = value.urlAfterRedirects;
        }
      });
    }

constructor(public router: Router) {
    console.log('APP_CONFIG：', this.configuration);
    this.nodeEnvironment =
      this.configuration === '' || this.configuration.startsWith('$')
        ? ''
        : `.${this.configuration}`;
    this.env = require('../../environments/environment' + this.nodeEnvironment);
    console.log('Environment:', this.nodeEnvironment);
    // Global site tag (gtag.js) - Google Analytics Start
    if (this.configuration == 'prod' && this.env.environment.googleTrackId) {
      this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          gtag('config', this.env.environment.googleTrackId, {
            page_path: event.urlAfterRedirects,
          });
        }
      });
    }
  }

public ngOnInit(): any {
      this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
        this.navlinks.forEach((link: DropdownLinkDirective) => {
          if (link.group) {
            const routeUrl = this.getUrl();
            const currentUrl = routeUrl.split('/');
            if (currentUrl.indexOf( link.group ) > 0) {
              link.open = true;
              this.closeOtherLinks(link);
            }
          }
        });
      });
    }

constructor(private router: Router, @Inject(DOCUMENT) private document: Document) {
        this.router.events.subscribe(
            (event) => {
                if (event instanceof NavigationStart) {
                    this.isSpinnerVisible = true;
                } else if (
                    event instanceof NavigationEnd ||
                    event instanceof NavigationCancel ||
                    event instanceof NavigationError
                ) {
                    this.isSpinnerVisible = false;
                }
            },
            () => {
                this.isSpinnerVisible = false;
            }
        );
    }

ngOnInit(): void {
    this.router.events.subscribe((ev: any) => {
      if (ev instanceof NavigationStart && !this.isMobileView) {
        if (ev.url === "" || ev.url === "/" || ev.url === "/how-to-add") {
          this.showMenu = false;
          this.isHomePage = true;
        } else {
          this.showMenu = true;
          this.isHomePage = false;
        }
      }
      if (ev instanceof NavigationEnd) {
        document.querySelector(".main-container").scrollTo(0, 0);
      }
    });
  }

ngAfterViewInit(): void {
    this.router.events.subscribe((event) => {
      if (
        event instanceof NavigationEnd || event instanceof NavigationCancel
      ) {
        this.loading = false;
      }
    });
  }

constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute,
    public title: Title,
    public sidenavMenuService: SidenavMenuService
  ) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(
        map(route => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        })
      )
      .pipe(filter(route => route.outlet === 'primary'))
      .pipe(mergeMap(route => route.data))
      .subscribe(event => {
        // this.title.setTitle(event['title']);
        this.pageInfo = event;
      });
  }

private navigateAndMoveToPrevStepRemoved(
    currentStep: TourStep,
    tourInstance: Tour,
    tourState: TourState,
    index: number,
    removedSteps: TourStep[],
  ) {
    this.router.navigate([currentStep.prevRoute]);
    this.router.events.subscribe((event: NavigationEvent) => {
      const prevStep = tourInstance.tourSteps.filter(
        ts => ts.id === currentStep.prevStepId,
      )[0];
      if (
        event instanceof NavigationEnd &&
        event.url === prevStep.currentRoute
      ) {
        this.moveToPrevStepRemoved(
          tourInstance,
          tourState,
          currentStep,
          index,
          removedSteps,
        );
      }
    });
  }

constructor(
    public router: Router,
    public navService: NavService,
    private authService: AuthService,
    public appComponent: AppComponent,
  ) {
    authService.statusChange.pipe(untilDestroyed(this)).subscribe((value: AuthServiceStatus) => {
      this.message = value.statusMessage;
    });

    this.router.events.subscribe((routeData) => {
      if (routeData instanceof NavigationEnd) {
        var route = this.router.routerState.root;
        while (route.firstChild) {
          route = route.firstChild;
        }
        const adminRoute = route.snapshot.data['isAdminRoute'];
        const path = routeData.urlAfterRedirects;
        if (adminRoute) {
          this.onHome = false;
          this.onProj = false;
          this.onAdmin = true;
        } else if (path.startsWith('/home')) {
          this.onHome = true;
          this.onProj = false;
          this.onAdmin = false;
        } else if (path.startsWith('/project')) {
          this.onHome = false;
          this.onProj = true;
          this.onAdmin = false;
        } else {
          this.onHome = false;
          this.onProj = false;
          this.onAdmin = false;
        }
      }
    });
  }

private init(): void {
    if (this._hasDynamicTitleServiceInitialized) {
      throw new Error('DynamicTitleService already initialized! Initialize it only once at the application bootstrap.');
    }
    this._router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        distinctUntilChanged()
      )
      .subscribe((route) => {
        this.check();
      });
    this._hasDynamicTitleServiceInitialized = true;
  }

constructor(
        public adbService: AdbClientService,
        public appService: AppService,
        public spinnerService: LoadingSpinnerService,
        public statusService: StatusBarService,
        private repoService: RepoService,
        router: Router,
        route: ActivatedRoute
    ) {
        appService.webService.isWebviewOpen = false;
        appService.resetTop();
        appService.isPackagesOpen = true;
        this.appService.setTitle('Installed Apps');
        this.sub = router.events.subscribe(val => {
            if (val instanceof NavigationEnd) {
                this.routerPackage = route.snapshot.paramMap.get('packageName');
            }
        });
        this.show_all = !!localStorage.getItem('packages_show_all');
    }

trackPageViews() {
    if (this.enabled) {
      this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd),
      )
        .subscribe(() => {
          ga('send', {hitType: 'pageview', page: this.location.path()});
        });
    }
  }

public isDetailsOutletActive$(): Observable<boolean> {
    return this._router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map((event: NavigationEnd) => {
          const urlTree = this._router.parseUrl(event.urlAfterRedirects);
          return urlTree.root.children[PRIMARY_OUTLET]?.children['details'] !== undefined;
        }),
      );
  }

constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private api: ApiService
  ) {
    const sub = this.router.events
      .pipe(filter((ev) => ev instanceof NavigationEnd))
      .subscribe((ev) => {
        if (!this.paramMap[this.router.url]) {
          this.paramMap[this.router.url] = {};
        }
        if (!this.pathMap[this.router.url]) {
          this.pathMap[this.router.url] = {};
        }
        this.updateEndpoint(this.router.url);
        // this.updateParamFromUrl(this.router.url);
      });
    this.subs.push(sub);
  }

initialize() {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            map(() => this.router.routerState.root),
            map(route => {
                while (route.firstChild) {
                    route = route.firstChild;
                }
                return route;
            }),
            filter(route => route.outlet === 'primary'),
            mergeMap(route => route.data),
            // eslint-disable-next-line @typescript-eslint/dot-notation
            map(data => ({ title: data['title'], prefix: data['prefix'] })),
        ).subscribe(title => {

            let formattedTitle = title.title != null ? title.title : '';

            if (title.prefix != null) {
                formattedTitle = title.prefix + ' - ' + formattedTitle;
            }

            // For the document title, we'll append the app title.
            // if (this.appTitle != null) {
            // this.document.title = formattedTitle + ' - ' + this.appTitle;
            this.document.title = this.setup.name + ' - ' + formattedTitle;
            // }

            this.title.next(formattedTitle);
        });
    }