Всем привет. Нужно организовать скроллинг на сайте, в основе которого лежит Angular2. Собственно, в чем заключается вопрос. Есть список статей, который, естественно подгружается в отдельном компоненте и, соответственно, появляется на странице не моментально(пока ответ с сервера, пока рендеринг). Нужно, чтобы пользователь при просмотре списка статей и перехода на любую из них, при нажатии кнопки "Назад" возвращался к тому месту списка, с которого ушел.
Вариантов было 2.
Первый вариант. При изменении роутинга записывать адрес страницы, с которой уходит пользователь и значение window.pageYOffset и через:
location: PlatformLocation;
Location.onPopState();
отлавливать нажатие кнопки back и через setTimeout (дожидаясь пока придет ответ с сервера и все прорисуется) скролить. Но тут проблема в том, что не очень хороший вариант, потому как доподлинно не известно через сколько может прийти ответ и произойдет отрисовка.
Второй вариант, над которым сейчас бьюсь - это через pushState попытаться все сделать. Но тут масса заковырок, которые никак не могу обойти. Почему-то перестает работать кнопка "Вперед" и почем-то window.onpopstate отрабатывает по несколько раз сразу.
Может кто-то сталкивался с подобной задачей, поделитесь опытом. Или направьте в нужное русло.
Создаем route-reuse-strategy.ts
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
private handlers: { [key: string]: DetachedRouteHandle } = {};
calcKey ( route: ActivatedRouteSnapshot ) {
let next = route;
let url = '';
while ( next ) {
if ( next.url ) {
url = next.url.join('/');
}
next = next.firstChild;
}
return url;
}
shouldDetach ( route: ActivatedRouteSnapshot ): boolean {
// console.debug('CustomReuseStrategy:shouldDetach', route);
return true;
}
store ( route: ActivatedRouteSnapshot, handle: DetachedRouteHandle ): void {
// console.debug('CustomReuseStrategy:store', route, handle);
this.handlers[this.calcKey(route)] = handle;
}
shouldAttach ( route: ActivatedRouteSnapshot ): boolean {
// console.debug('CustomReuseStrategy:shouldAttach', route);
return !!route.routeConfig && !!this.handlers[this.calcKey(route)];
}
retrieve ( route: ActivatedRouteSnapshot ): DetachedRouteHandle {
// console.debug('CustomReuseStrategy:retrieve', route);
if ( !route.routeConfig ) {
return null;
}
return this.handlers[this.calcKey(route)];
}
shouldReuseRoute ( future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot ): boolean {
// console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
return this.calcKey(curr) === this.calcKey(future);
}
}
Импортим app.module.ts
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
Далее, если с роутами все нормально, у вас будет сохраняться их состояние. В вашем случае при возврате на главную страницу не будет никаких подгрузок, вы будете возвращаться туда, откуда ушли.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей