Всем привет. Нужно организовать скроллинг на сайте, в основе которого лежит 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 }
Далее, если с роутами все нормально, у вас будет сохраняться их состояние. В вашем случае при возврате на главную страницу не будет никаких подгрузок, вы будете возвращаться туда, откуда ушли.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Хочу постепенно отказываться от использования jQueryИмеется блок с ссылками:
Прежде чем перейти сюда чтобы задать вопрос, я честно на протяжении часа гуглил, но не смог найти ответов, хоть и в некоторых ссылках встречалось...
не кидайтесь, пожалуйста, тапками) я новичок в программировании хочу узнать чем отличается код ajax запроса на сайт FormData от Request Payload больше...