#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. @Шейх ХАЙБАЛА Я отредактировал то, что ты сказал, и у меня все еще есть проблема. Может быть, ты знаешь, почему ?