Блог

Я использую ng2-прокрутку страницы (https://www.npmjs.com/package/ng2-page-scroll ) вот так:

<a pageScroll [routerLink]="['router-one']" href="#content1">Link 1</a>
<a pageScroll [routerLink]="['router-two']" href="#content2">Link 2</a>
<a pageScroll [routerLink]="['router-three']" href="#content3">Link 3</a>

Работает нормально, за исключением того, что … допустим, я включаю router-one фрагмент content1 , и я нажимаю Link2 , где у меня много компонентов, которым необходимо загрузить свои данные.

После завершения маршрутизации он просто переходит к моему фрагменту, что понятно, но мои данные, вероятно, еще не загружены и, возможно, будут загружены в течение следующих 1000 мс.

Таким образом, он в основном переходит к этому идентификатору / фрагменту, а затем загружает данные, и вы больше не видите на своем экране раздел с идентификатором / фрагментом, который вы запросили.

Как я могу установить задержку, чтобы дать возможность данным загружаться, когда вы работаете по маршрутам?

Редактировать:

 const childRoutes: Routes = [
    { path: 'router-one', component: OneComponent, pathMatch: 'full' },
    { path: 'router-two', component: TwoComponent, pathMatch: 'full' },
    { path: 'router-three', component: ThreeComponent, pathMatch: 'full' }
];
 

Целевой фрагмент легко может находиться в другом месте, начиная с момента загрузки представления и заканчивая после того, как представление было увлажнено. В моем случае целевой идентификатор даже не присутствовал, пока данные не были загружены. Решаемая проблема путем захвата копии фрагмента и использования ng2-прокрутки страницы для прокрутки до фрагмента ПОСЛЕ загрузки данных.

Страница имеет целевой идентификатор:

 <span id="target-position"></span>
 

Ссылка указывает фрагмент отдельно от маршрута:

 <a [routerLink]="['some-route']" fragment="target-position">Link 1</a>
 

Частичный код компонента:

 routeFragment: string;

ngOnInit() {

  this.route.fragment.subscribe(f => {
    // save fragment for later scroll target
    this.routeFragment = f;
  });

  this.someDataService.get().subscribe(data => {

    // do something with data
    this.data = data;

    // data is loaded, scroll to original fragment
    this.pageScrollService.start(PageScrollInstance.simpleInstance(this.document, `#${this.routeFragment}`));

  });

}
 

Проблема в том, что для загрузки данных на маршруте, к которому вы переходите, требуется некоторое время? Я думаю, лучший способ справиться с этой ситуацией — использовать PageScrollService на целевом маршруте / компоненте для запуска анимации прокрутки сразу после загрузки данных (вероятно, вы получите событие, когда это произойдет, например, завершенный http-запрос). Вы можете передать целевой элемент прокрутки новому маршруту в качестве необязательного параметра маршрута. (https://angular.io/docs/ts/latest/guide/router.html #!#необязательно-параметры маршрута)

 <a [routerLink]="['router-one', { scrollTo: '#content1' }]">Link 1</a>
 

Затем в вашем целевом компоненте вы получаете доступ к значению scrollTo из ActivatedRoute и передаете его в PageScrollService, что-то вроде:

 constructor(
 private route: ActivatedRoute,
 private pageScrollService: PageScrollService,
 @Inject(DOCUMENT) private document: Document) {}

ngOnInit() {
    this.route.params.forEach((params: Params) => {
        if (params['scrollTo']){
            let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, params['scrollTo']);
            this.pageScrollService.start(pageScrollInstance);
        }
}
 

Источник: https://github.com/Nolanus/ng2-page-scroll/issues/48#issuecomment-254177855