NG2-страницы свитка: Дождитесь загрузки содержимого при работе по маршрутам

Question

Я использую 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 мс.

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

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

EDIT:

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

Answer 1

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

<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

Answer 2

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

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

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

    }); 

}