Угол 11 восстановление положения прокрутки с помощью наблюдаемой и маршрутизируемой ссылки

#angular

#угловой

Вопрос:

Я использую angular 11.

У меня есть список продуктов, который я получаю с сервера и показываю в angular web, и когда я нажимаю на конкретный продукт, он переходит к деталям продукта с помощью routerlink.

На ngOnInit я вызываю сервер, чтобы получить продукты и вернуть наблюдаемые продукты.

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

Я попытался использовать scrollpositionrestoration внутри RouteModule.forRoot, но он работает только со статическими данными, а у меня есть динамические данные, поступившие с сервера.

Спасибо за помощников.

Редактировать:

Пытаюсь реализовать событие маршрутизатора и получаю:

 Scroll {routerEvent: NavigationEnd, position: Array(2), anchor: null} anchor: null position: Array(2) 0: 0 1: 0 length: 2 [[Prototype]]: Array(0) routerEvent: NavigationEnd {id: 9, url: '/home/products', urlAfterRedirects: '/home/products'} [[Prototype]]: Object  

основной компонент модуля:

 import { Location, ViewportScroller } from '@angular/common'; import { Router, Scroll, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators';  @Component({  selector: 'product',  templateUrl: './product.component.html',  styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit {   constructor(private loc: Location, private router: Router, private viewportScroller: ViewportScroller) {  this.router.events.pipe(filter(e =gt; e instanceof Scroll)).subscribe((e: any) =gt; {  console.log(e);   // this is fix for dynamic generated(loaded..?) content  setTimeout(() =gt; {  if (e.position) {  this.viewportScroller.scrollToPosition(e.position);  } else if (e.anchor) {  this.viewportScroller.scrollToAnchor(e.anchor);  } else {  this.viewportScroller.scrollToPosition([0, 0]);  }  });  });  }   ngOnInit() {  console.log("ProductComponent");  }  }  

Почему я получаю ноль в позиции?

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

1. Здравствуйте, вам нужно сохранить последнюю просмотренную позицию продукта в общей службе angular. В нем вы можете использовать наблюдаемое для хранения позиции. В ngOnInit компонента списка продуктов вы можете подписаться на эту услугу, чтобы получить последнюю позицию. Будет проще, если вы поделитесь стекблитцем!

2. @Шейх ХАЙБАЛА Я отредактировал то, что ты сказал, и у меня все еще есть проблема. Может быть, ты знаешь, почему ?