@angular/router#NavigationStart TypeScript Examples

public waitForStopWatchingWhitelist(): void {
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationStart),
        takeUntil(this.destroy$)
      )
      .subscribe((event: NavigationStart) => {
        if (!event.url.includes('liquidity-providing')) {
          this.lpService.stopWatchWhitelist();
        }
      });
  }

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

private initializeApp() {
    this.notificationsService.requestSubscription();
    this.router.events.subscribe(evt => {
      if (evt instanceof NavigationStart) {
        if (evt.url.startsWith('/position') && evt.url.endsWith('embed=true'))
          this.hideMenu = true;
      }
    });
    this.platform.backButton.subscribe(async () => {
      this.routerOutlets.forEach(async (outlet: IonRouterOutlet) => {
        this.goBack();
      });
    });
    Promise.all([
      this.configurationService.initialize(),
      this.platform.ready()
    ]).then((values: any[]) => {
      this.config = values[0];
      this.pieceTheme = this.config.pieceTheme;
      this.themeSwitcherService.setTheme(this.config.colorTheme);
      this.boardThemeSwitcherService.setTheme(this.config.boardTheme);
      this.translate.get(['app.back-to-exit']).subscribe(async res => {
        this.texts = res;
      });
      this.initialized = true;
    });
  }

constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        if (this.keepAfterRouteChange) {
          // only keep for a single route change
          this.keepAfterRouteChange = false;
        } else {
          // clear alert messages
          this.clear();
        }
      }
    });
  }

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) {

      }
    })
  }

/**
   * 检测路由导航事件
   */
  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;
      }
    });
  }

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

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

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 setCurrentStep(step: T): void {
        this.currentStep = step;
        this.showStep(this.currentStep);
        this.router.events
            .pipe(filter(event => event instanceof NavigationStart), first())
            .subscribe(() => {
                if (this.currentStep && this.currentStep.hasOwnProperty('route')) {
                    this.hideStep(this.currentStep);
                }
            });
    }

public startAt(stepId: number | string): void {
        this.status = TourState.ON;
        this.goToStep(this.loadStep(stepId));
        this.start$.next();
        this.router.events
            .pipe(filter(event => event instanceof NavigationStart), first())
            .subscribe(() => {
                if (this.currentStep && this.currentStep.hasOwnProperty('route')) {
                    this.hideStep(this.currentStep);
                }
            });
    }

/**
   * @param event Método responsável por tratar as condicionais em relação ao Loading Bar
   */
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this.slimLoadingBarService.start();
    }

    if (event instanceof NavigationEnd) {
      this.slimLoadingBarService.complete();
    }

    if (event instanceof NavigationCancel) {
      this.slimLoadingBarService.stop();
    }

    if (event instanceof NavigationError) {
      this.slimLoadingBarService.stop();
    }
  }

ngOnInit() {
        // subscribe to new alert notifications
        this.alertSubscription = this.alertService.onAlert(this.id)
            .subscribe(alert => {
                // clear alerts when an empty alert is received
                if (!alert.message) {
                    // filter out alerts without 'keepAfterRouteChange' flag
                    this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);

                    // reset 'keepAfterRouteChange' flag on the rest
                    this.alerts.forEach(x => x.keepAfterRouteChange = false);
                    return;
                }

                // add alert to array
                this.alerts.push(alert);

                // auto close alert if required
                if (alert.autoClose) {
                    setTimeout(() => this.removeAlert(alert), 3000);
                }
           });

        // clear alerts on location change
        this.routeSubscription = this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.alertService.clear(this.id);
            }
        });
    }

ngOnInit() {
        // subscribe to new alert notifications
        this.alertSubscription = this.alertService.onAlert(this.id)
            .subscribe(alert => {
                // clear alerts when an empty alert is received
                if (!alert.message) {
                    // filter out alerts without 'keepAfterRouteChange' flag
                    this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);

                    // remove 'keepAfterRouteChange' flag on the rest
                    this.alerts.forEach(x => delete x.keepAfterRouteChange);
                    return;
                }

                // add alert to array
                this.alerts.push(alert);

                // auto close alert if required
                if (alert.autoClose) {
                    setTimeout(() => this.removeAlert(alert), 3000);
                }
           });

        // clear alerts on location change
        this.routeSubscription = this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.alertService.clear(this.id);
            }
        });
    }

ngOnInit() {
        // subscribe to new alert notifications
        this.alertSubscription = this.alertService.onAlert(this.id)
            .subscribe(alert => {
                // clear alerts when an empty alert is received
                if (!alert.message) {
                    // filter out alerts without 'keepAfterRouteChange' flag
                    this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);

                    // remove 'keepAfterRouteChange' flag on the rest
                    this.alerts.forEach(x => delete x.keepAfterRouteChange);
                    return;
                }

                // add alert to array
                this.alerts.push(alert);

                // auto close alert if required
                if (alert.autoClose) {
                    setTimeout(() => this.removeAlert(alert), 3000);
                }
           });

        // clear alerts on location change
        this.routeSubscription = this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.alertService.clear(this.id);
            }
        });
    }

ngOnInit() {
        // subscribe to new alert notifications
        this.alertSubscription = this.alertService.onAlert(this.id)
            .subscribe(alert => {
                // clear alerts when an empty alert is received
                if (!alert.message) {
                    // filter out alerts without 'keepAfterRouteChange' flag
                    this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);

                    // remove 'keepAfterRouteChange' flag on the rest
                    this.alerts.forEach(x => delete x.keepAfterRouteChange);
                    return;
                }

                // add alert to array
                this.alerts.push(alert);

                // auto close alert if required
                if (alert.autoClose) {
                    setTimeout(() => this.removeAlert(alert), 3000);
                }
           });

        // clear alerts on location change
        this.routeSubscription = this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.alertService.clear(this.id);
            }
        });
    }

private _initLayout(): void {

    // Show progressbar on route change lazy loading
    this._router.events
      .pipe(filter((event) => event instanceof NavigationStart))
      .subscribe(() => {
        this._loaderService.showProgressbar();
      });

    this._router.events
      .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
      .subscribe(() => {
        if (this.sidenavDrawer.mode === 'over' && this.sidenavDrawer.opened) {
          this.sidenavDrawer.close();
        }
        this._loaderService.hideProgressbar();
      });

    // Adjusting side nav based on screen size
    this._mediaQueryService.onMediaChange
      .pipe(
        distinctUntilChanged()
      )
      .subscribe(value => {
        if (!value) { return; }
        this._setSidenavAccordingScreenSize(value);
      });
  }

constructor(private auth: AuthService, private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.isLoadingRoute = true;
      }
      if (
        event instanceof NavigationEnd ||
        event instanceof NavigationError ||
        event instanceof NavigationCancel
      ) {
        this.isLoadingRoute = false;
      }
    });
  }

constructor(
    router: Router,
    private appService: AppService
  ) {
    this.loading = false;
    router.events.subscribe(
      (event: RouterEvent):void => {
        if ( event instanceof NavigationStart ) {
          this.loading = true;
        } else if ( event instanceof NavigationEnd ) {
          this.loading = false;
        }
      }
    );
  }

public ngOnInit(): void {
    this.router.events.pipe(
      filter((x) => x instanceof NavigationStart)
    )
      .subscribe((event: NavigationStart) => {
          if (event.url !== '/' && !this.navdrawer.pin) {
              // Close drawer when selecting a view on mobile (unpinned)
              this.navdrawer.close();
          }
      });
  }

checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }

constructor(
    private readonly headerStore: HeaderStore,
    private readonly router: Router,
    private readonly cdr: ChangeDetectorRef,
    private readonly authService: AuthService,
    private readonly walletConnectorService: WalletConnectorService,
    private translateService: TranslateService,
    @Inject(TuiDialogService) private readonly dialogService: TuiDialogService,
    @Inject(Injector) private injector: Injector,
    @Inject(WINDOW) private readonly window: Window,
    @Self() private readonly destroy$: TuiDestroyService
  ) {
    this.isMobile$ = this.headerStore.getMobileDisplayStatus();
    this.isConfirmModalOpened$ = this.headerStore.getConfirmModalOpeningStatus();
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.headerStore.setMobileMenuOpeningStatus(false);
        this.headerStore.setConfirmModalOpeningStatus(false);
      }
    });
    this.currentUser$ = this.authService.getCurrentUser();
  }

describe('AppComponent', () => {
  let appComponent: AppComponent;

  let fixture: ComponentFixture<AppComponent>;
  let routerSpy: jasmine.SpyObj<Router>;

  beforeEach(() => {
    const mockRouter = {
      events: of({}),
    };

    TestBed.configureTestingModule({
      imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule],
      providers: [
        AppComponent,
        SlimLoadingBarService,
        { provide: Router, useValue: mockRouter },
      ],
    });

    fixture = TestBed.createComponent(AppComponent);
    appComponent = fixture.componentInstance;

    routerSpy = TestBed.inject(Router) as jasmine.SpyObj<Router>;
  });

  describe('Initialization', () => {
    it('should be created', () => {
      expect(appComponent).toBeTruthy();
    });
    it('should init not EventNavigation', () => {
      const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
      appComponent.ngOnInit();
      expect(spy_ngOnInit).toHaveBeenCalled();
    });
    it('should init with NavigationStart', () => {
      const event = new NavigationStart(0, 'URI');
      (<any>routerSpy.events) = of(event);
      const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
      appComponent.ngOnInit();
      expect(spy_ngOnInit).toHaveBeenCalled();
    });
    it('should init with NavigationEnd', () => {
      const event = new NavigationEnd(0, 'URI', 'URL');
      (<any>routerSpy.events) = of(event);
      const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
      appComponent.ngOnInit();
      expect(spy_ngOnInit).toHaveBeenCalled();
    });
    it('should init with NavigationCancel', () => {
      const event = new NavigationCancel(0, 'URI', 'FAIL');
      (<any>routerSpy.events) = of(event);
      const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
      appComponent.ngOnInit();
      expect(spy_ngOnInit).toHaveBeenCalled();
    });
    it('should init with NavigationError', () => {
      const event = new NavigationError(0, 'URI', {});
      (<any>routerSpy.events) = of(event);
      const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
      appComponent.ngOnInit();
      expect(spy_ngOnInit).toHaveBeenCalled();
    });
  });

});

ngOnInit() {
    if ((window as any) && (window as any).localStorage) {
      const lstorage = (window as any).localStorage;
      Object.keys(lstorage)
        .filter((key) => key.match(/^fyle/))
        .forEach((key) => lstorage.removeItem(key));
    }

    this.checkAppSupportedVersion();
    from(this.routerAuthService.isLoggedIn()).subscribe((loggedInStatus) => {
      if (loggedInStatus) {
        this.sidemenuRef.showSideMenu();
        this.pushNotificationService.initPush();
      }
    });

    this.userEventService.onSetToken(() => {
      setTimeout(() => {
        this.sidemenuRef.showSideMenu();
      }, 500);
    });

    this.userEventService.onLogout(() => {
      this.trackingService.onSignOut();
      this.freshChatService.destory();
      this.isSwitchedToDelegator = false;
      this.router.navigate(['/', 'auth', 'sign_in']);
    });

    this.setupNetworkWatcher();

    this.router.events.subscribe((ev) => {
      // adding try catch because this may fail due to network issues
      // noop is no op - basically an empty function
      try {
        this.trackingService.updateIdentityIfNotPresent().then(noop).catch(noop);
      } catch (error) {}

      if (ev instanceof NavigationStart) {
        this.previousUrl = this.router.url;
      }
      if (ev instanceof NavigationEnd) {
        if (
          ev.urlAfterRedirects.indexOf('enterprise') > -1 &&
          !(ev.urlAfterRedirects.indexOf('delegated_accounts') > -1)
        ) {
          setTimeout(() => this.menuController.swipeGesture(true), 500);
        } else {
          setTimeout(() => this.menuController.swipeGesture(false), 500);
        }
      }
    });
  }

constructor(
    private cdr: ChangeDetectorRef,
    private location: Location,
    private authService: AuthService,
    private router: Router,
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer
  ) {
    iconRegistry.addSvgIcon(
      "home",
      sanitizer.bypassSecurityTrustResourceUrl("assets/home.svg")
    );
    iconRegistry.addSvgIcon(
      "list",
      sanitizer.bypassSecurityTrustResourceUrl("assets/list.svg")
    );
    iconRegistry.addSvgIcon(
      "settings",
      sanitizer.bypassSecurityTrustResourceUrl("assets/settings.svg")
    );
    iconRegistry.addSvgIcon(
      "edit",
      sanitizer.bypassSecurityTrustResourceUrl("assets/edit.svg")
    );
    iconRegistry.addSvgIcon(
      "remove",
      sanitizer.bypassSecurityTrustResourceUrl("assets/remove.svg")
    );

    this.routerSub = router.events.subscribe((e) => {
      if (e instanceof NavigationStart || e instanceof ActivationStart) {
        this.loadingRoute = true;
      } else if (
        e instanceof NavigationEnd ||
        e instanceof NavigationError ||
        e instanceof NavigationCancel
      ) {
        this.loadingRoute = false;

        this.selectCurrentRoute();
      }
    });
    this.userEmail$ = this.authService.getUserEmail$();
  }

constructor(
        @Optional() @Inject(SEARCH_OPTIONS) protected options: SearchOptions,
        protected router: Router,
        protected appService: AppService,
        protected queryService: QueryWebService,
        protected loginService: LoginService,
        protected intlService: IntlService,
        protected formatService: FormatService,
        protected auditService: AuditWebService,
        protected notificationsService: NotificationsService,
        protected exprBuilder: ExprBuilder,
        protected queryIntentWebService: QueryIntentWebService) {

        if (!this.options) {
            this.options = {
                routes: ["search"]
            };
        }

        this.results = undefined;
        this.breadcrumbs = undefined;

        this.loginSubscription = this.loginService.events.subscribe(
            (value) => {
                if (value.type === "session-changed") {
                    this.handleLogin();
                }
            });
        this.routerSubscription = this.router.events.subscribe(
            (event) => {
                if (event instanceof NavigationStart) {
                    // Restore state on back/forward until this issue is fixed: https://github.com/angular/angular/issues/28108
                    const currentNavigation = this.router.getCurrentNavigation();
                    if (currentNavigation && event.navigationTrigger === "popstate" &&
                        !currentNavigation.extras.state && event.restoredState) {
                        currentNavigation.extras.state = event.restoredState;
                    }
                }
                else if (event instanceof NavigationEnd) {
                    this.handleNavigation();
                }
            });
        this.appSubscription = this.appService.events.subscribe(
            (event) => {
                if (event.type === "query-changed") {
                    if (this._query && (!this.appService.ccquery || (this._query.name !== this.appService.ccquery.name))) {
                        this.clearQuery();
                    }
                }
            });
    }