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