Scroll в Angular2

429
27 сентября 2017, 12:50

Всем привет. Нужно организовать скроллинг на сайте, в основе которого лежит Angular2. Собственно, в чем заключается вопрос. Есть список статей, который, естественно подгружается в отдельном компоненте и, соответственно, появляется на странице не моментально(пока ответ с сервера, пока рендеринг). Нужно, чтобы пользователь при просмотре списка статей и перехода на любую из них, при нажатии кнопки "Назад" возвращался к тому месту списка, с которого ушел.

Вариантов было 2.

Первый вариант. При изменении роутинга записывать адрес страницы, с которой уходит пользователь и значение window.pageYOffset и через:

location: PlatformLocation; 
Location.onPopState();

отлавливать нажатие кнопки back и через setTimeout (дожидаясь пока придет ответ с сервера и все прорисуется) скролить. Но тут проблема в том, что не очень хороший вариант, потому как доподлинно не известно через сколько может прийти ответ и произойдет отрисовка.

Второй вариант, над которым сейчас бьюсь - это через pushState попытаться все сделать. Но тут масса заковырок, которые никак не могу обойти. Почему-то перестает работать кнопка "Вперед" и почем-то window.onpopstate отрабатывает по несколько раз сразу.

Может кто-то сталкивался с подобной задачей, поделитесь опытом. Или направьте в нужное русло.

Answer 1

Создаем 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 }

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

READ ALSO
onclick функция на чистом javascript

onclick функция на чистом javascript

Хочу постепенно отказываться от использования jQueryИмеется блок с ссылками:

315
Не могу понять роль нуля в данном контексте. JS

Не могу понять роль нуля в данном контексте. JS

Прежде чем перейти сюда чтобы задать вопрос, я честно на протяжении часа гуглил, но не смог найти ответов, хоть и в некоторых ссылках встречалось...

270
чем отличается Request Payload от FormData в js

чем отличается Request Payload от FormData в js

не кидайтесь, пожалуйста, тапками) я новичок в программировании хочу узнать чем отличается код ajax запроса на сайт FormData от Request Payload больше...

284
Описание элементов в цикле CSS,JS

Описание элементов в цикле CSS,JS

Добрый вечерЕсть задача создать библиотеку с музыкой

303