@angular/router#NavigationError TypeScript Examples

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

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

/**
   * @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();
    }
  }

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

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

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

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

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

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

});