Блог

Главная - Вопросы по программированию - Как сохранить положение, которое прокручивается при переходе на предыдущую страницу с помощью angular 11?

Как сохранить положение, которое прокручивается при переходе на предыдущую страницу с помощью angular 11?

#angular

Вопрос:

Я использую angular 11 для веб-СПА, и у меня возникла проблема с переходом на предыдущую страницу. Как я могу сохранить позицию предыдущей страницы, на которую прокручивается прокрутка, или это действие является поведением браузера по умолчанию?

Большое вам спасибо за ваше внимание!

Ответ №1:

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

Если это то, что вы хотите, вы можете сделать это с помощью «location»:

 import { Location } from '@angular/common';
....
constructor(
...
    private _location: Location,
...
  ) {
...
  }

  backToPreviousPage() {
    this._location.back();
  }

Комментарии:

1. Спасибо, Хуан, но я имею в виду, как мы можем сохранить положение предыдущей страницы после возврата? Пример: я нахожусь на странице A и прокручиваю вниз до координат (x, y), после этого я перехожу на страницу B и после того, как я вернусь на страницу A, как мы можем сохранить эту позицию?

2. Я боялся, что вы этого хотите. Извините, но я не знаю, как это сделать (я даже не знаю, возможно ли это, потому что при переходе к новым компонентам, я думаю, старые удаляются из памяти.. итак, нам понадобится что-то, что «автоматически» сохраняет позицию в прокрутке и т.д… Я не знаю ..). В любом случае, есть что-то полезное, что мне тоже иногда понадобилось бы… Я продолжаю здесь, чтобы увидеть другие ответы!

Ответ №2:

я бы предложил использовать сервис для управления вашим состоянием и положением. в зависимости от того, сколько истории навигации вы хотите сохранить, это сделает это более или менее сложным.

простой сервис будет выглядеть примерно так.

 import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class NavService {
  private _lastScrollPositionY: number;
  private _lastScrollPositionX: number;

  constructor(
    private _location: Location,
    private _router: Router,
  ) { }

  back() {
    this._location.back();
    if (this._lastScrollPositionY || this._lastScrollPositionX) {
      window.scroll(this._lastScrollPositionX, this._lastScrollPositionY);
      this._lastScrollPositionY = this._lastScrollPositionX = null;
    }
  }

  navigate(route: string[]) {
    this._lastScrollPositionX = window.scrollX;
    this._lastScrollPositionY = window.scrollY;
    this._router.navigate(route)
  }

}
``

Комментарии:

1. спасибо, но вы можете использовать это angular.io/api/common/ViewportScroller вместо этого

Ответ №3:

Я попробовал это решение, и оно работает как шарм

 this.router.events.pipe(filter(e => e instanceof Scroll)).subscribe((e: any) => {
  setTimeout(() => { 
    if (e.position) {
      this.viewportScroller.scrollToPosition(e.position);
    } else if (e.anchor) { 
      this.viewportScroller.scrollToAnchor(e.anchor);
    } else { 
      this.viewportScroller.scrollToPosition([0, 0]);
    }
  }, 300);
});

если ваше приложение все еще мигает после возврата, мы можем реализовать механизм кэширования данных для его устранения.

Метки: , ,