Angular viewportScroller не работает в первый раз, когда я направляюсь в нужное место # фрагмент - PullRequest
Новая
       7

Angular viewportScroller не работает в первый раз, когда я направляюсь в нужное место # фрагмент

0 голосов
/ 07 февраля 2019

У меня проблема с viewportScroller, названным в названии.

В моем проекте мне нужно перенаправить с вложенного URL-адреса на простой статический сайт условий и положений (который имеет боковую панель навигации для навигации по сайту вкаждый якорь).

Работает нормально, но сначала не прокручивается до нужного фрагмента.Если вы заходите на указанный сайт условий и положений и снова выполняете весь рабочий процесс (перейдите по вложенному URL-> нажмите на ссылку, которая перенаправляет вас на сайт условий), то он приведет вас к требуемому фрагменту.И это не позволяет мне прокручивать один и тот же фрагмент дважды с помощью навигационной панели.

ссылка, которая перенаправляет вас: 

<a routerLink="/terms-and-conditions"
              fragment="practice-customer-key-obligations">Terms and Conditions</a>

компонент условий: 

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { Router, Scroll } from '@angular/router';
import { ViewportScroller } from '@angular/common';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-terms-and-conditions',
  templateUrl: './terms-and-conditions.component.html',
  styleUrls: ['./terms-and-conditions.component.scss']
})
export class TermsAndConditionsComponent implements OnInit, AfterViewChecked {

  constructor(private router: Router, private viewportScroller: ViewportScroller) {
  }

  ngOnInit() {

  }

  ngAfterViewChecked() {
    this.viewportScroller.setOffset([0, 64]);
    this.viewportScroller.setHistoryScrollRestoration('auto');

    this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
      this.viewportScroller.scrollToAnchor(element.anchor);
    });
  }
}

условия маршрутизациимодуль: 

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, ExtraOptions } from '@angular/router';
import { BasicLayout } from '../layouts';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions.component';

const routes: Routes = [
  {
    path: '', component: BasicLayout,
    children: [
      { path: 'terms-and-conditions', component: TermsAndConditionsComponent }
    ]
  }
];

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled'
};

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes, routerOptions)
  ],
  exports: [
    RouterModule
  ]
})
export class TermsRoutingModule { }

Что мне здесь не хватает?Если есть более простой способ, что это?

PS. Мне запрещено использовать манипуляции с JS DOM следующим образом: 

 this.route.fragment.subscribe((fragment: string): void => {
      if (fragment && document.getElementById(fragment) !== null) {
        document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
}
...