@angular/router#Scroll TypeScript Examples

The following examples show how to use @angular/router#Scroll. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: app.module.ts    From rubic-app with GNU General Public License v3.0 6 votes vote down vote up 
/**
   * 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]);
        }
      });
  }
Example #2
Source File: app.module.ts    From geonetwork-ui with GNU General Public License v2.0 6 votes vote down vote up 
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,
              })
            }
          }
        }
      })
  }
Example #3
Source File: home.page.ts    From onchat-web with Apache License 2.0 6 votes vote down vote up 
ngOnInit() {
    // 在去到个人中心tab的时候变为直角头部
    this.router.events.pipe(
      takeUntil(this.destroyer),
      filter(event => event instanceof Scroll)
    ).subscribe((event: Scroll) => {
      this.sharp = event.routerEvent.url === '/home/profile';
    });
  }