@angular/router#Event TypeScript Examples

/**
   * Defines scroll strategy, when page url is changed.
   * Doesn't scroll if only query parameters are changed.
   */
  private setScrollStrategy(): void {
    this.router.events
      .pipe(
        filter((e: Event): e is Scroll => e instanceof Scroll),
        pairwise()
      )
      .subscribe(([prevEvent, event]) => {
        if (event.position) {
          // backward navigation
          this.viewportScroller.scrollToPosition(event.position);
        } else if (event.anchor) {
          // anchor navigation
          this.viewportScroller.scrollToAnchor(event.anchor);
        } else if (
          prevEvent.routerEvent.urlAfterRedirects.split('?')[0] !==
          event.routerEvent.urlAfterRedirects.split('?')[0]
        ) {
          // forward navigation
          this.viewportScroller.scrollToPosition([0, 0]);
        }
      });
  }

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(
    translate: TranslateService,
    router: Router,
    @Inject(DOCUMENT) private document: Document
  ) {
    translate.setDefaultLang(getDefaultLang())
    translate.use(getLangFromBrowser() || getDefaultLang())
    ThemeService.applyCssVariables(
      getThemeConfig().PRIMARY_COLOR,
      getThemeConfig().SECONDARY_COLOR,
      getThemeConfig().MAIN_COLOR,
      getThemeConfig().BACKGROUND_COLOR,
      getThemeConfig().MAIN_FONT,
      getThemeConfig().TITLE_FONT,
      getThemeConfig().FONTS_STYLESHEET_URL
    )
    ThemeService.generateBgOpacityClasses(
      'primary',
      getThemeConfig().PRIMARY_COLOR,
      [10, 25]
    )

    router.events
      .pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
      .subscribe((e) => {
        if (e.position) {
          // backward navigation
        } else {
          if (e.routerEvent.url.startsWith(`/${ROUTER_ROUTE_DATASET}`)) {
            const recordPageElement = document.getElementById('record-page')
            if (recordPageElement) {
              recordPageElement.scrollTo({
                top: 0,
              })
            }
          }
        }
      })
  }

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

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

constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        this.currentUrl.next(event.urlAfterRedirects);
      }
    });
  }

constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationEnd) {
                this.currentUrl.next(event.urlAfterRedirects);
            }
        });
    }

/**
   * OnInit responsável por trabalhar com a questão do Slim Loading Bar na aplicação.
   */
  ngOnInit(): void {
    this.router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }

public ngOnInit() {
    const channel = new BehaviorSubject<{
      type: string;
      value: any;
    }>({type: 'INIT', value: null});

    channel.subscribe((event) => {
      if (event.type === 'SET_DETAIL_OBJ') {
        this.legacyService.setState({
          detailObj: UtilsService.objKeysTransformer(event.value, camelCase) as any,
        });
      }
    });

    // share service with taiga-old
    const injector = Injector.create({
      providers: [
        {provide: DataConversionService, deps: []},
      ],
    });

    (window as any).legacyChannel = channel;
    (window as any).angularDataConversion = () => {
      return injector.get(DataConversionService);
    };

    this.router.events.pipe(
      filter((e: Event) => {
        return e instanceof NavigationEnd;
      })
    ).subscribe((e: NavigationEnd) => {
      const $location = this.legacyService.getInjector().get('$location');
      const $rootScrope = this.legacyService.getInjector().get('$rootScope');

      if ($location.path() !== e.url) {
        $location.url(e.url);
      }

      $rootScrope.$applyAsync();
    });

    // Tell Angular when the route change in angularjs to keep both framework sync.
    // This fix an issue when the user for example is in /issues,
    // navigate with angular.js to /backlog and the try to go back to /issues
    // with an Angular link, without this code Angular thinks that you already are in /issues
    // so it prevents the navigation.
    this.legacyService.whenAngularReady().then(() => {
      const $location = this.legacyService.getInjector().get('$location');
      const $rootScrope = this.legacyService.getInjector().get('$rootScope');

      $rootScrope.$on('$routeChangeSuccess', () => {
        this.router.navigateByUrl($location.path());

        this.legacyService.setState({
          detailObj: undefined,
        });
      });
    });
  }