угловая + пагинация + страница сбрасывается в 1 при переходе на вторичную розетку - PullRequest
Новая
       25

угловая + пагинация + страница сбрасывается в 1 при переходе на вторичную розетку

0 голосов
/ 05 февраля 2019

Я реализовал пользовательский компонент разбивки на страницы, используя PaginationControlsDirective.

У меня есть требование, при котором я должен открыть диалоговый компонент (всплывающее окно) в качестве вторичного выхода из компонента разбивки на страницы.Сценарий:

Наличие родительского компонента.

Компонент пагинации - это основной выход.

Диалоговое окно / всплывающее окно - это дополнительный выход.

URL-адрес для разбиения на страницыкомпонент: http://localhost:4200/pricing/quickViewPricing/pricesite?page=2

Теперь при нажатии кнопки я звоню router.navigate на вторичную розетку: 

this.router.navigate([{ 
   outlets: { fullViewPopup: ‘fullviewprice’ } }], 
   { relativeTo: this.route.parent });

Откроется всплывающее окно с URL: 

http://localhost:4200/pricing/quickViewPricing/(pricesite//fullViewPopup:fullviewprice/fullviewpricedetail)

pricesite - это моя основная розетка на quickViewPricing fullViewPopup - моя дополнительная розетка на quickViewPricing

ВЫПУСК : при всплывающем окне номер страницы не сохраняетсяи страница возвращается на первую страницу.

routing.module: 

path: 'quickViewPricing',
    component: QuickViewPricingComponent,
    data: { breadcrumb: "Pricing - Qucik View Price" },
    children: [
      {
        path: 'pricesite',
        component: QvpPaginationContainerComponent,
        outlet: 'primary',
        canActivate: [DoNotShowSecondaryOnRefreshGuard]
      },
      {
        path: 'fullviewprice',
        component: FullViewPriceComponent,
        outlet: 'fullViewPopup',
        children: [
          {
            path: 'fullviewpricedetail',
            component: FullViewPriceDetailComponent
          }
        ]
      }  
    ]

QvpPaginationContainerComponent // Обработчик события при нажатии кнопки 

public fullViewClick(event) {
this.router.navigate([{ outlets: { fullViewPopup: 'fullviewprice' } }], { relativeTo: this.activatedRoute.parent });
event.stopImmediatePropagation();
}

QvpPaginationContainerComponent.html 

<div class="col-md-12" *ngFor="let item of collection | paginate: config; let i = index">
    <app-price-site [index]="i" [siteId]="item"></app-price-site>
  </div>

селектор app-price-site - это пользовательский компонент разбиения на страницы

  1. QvpPaginationContainerComponent - это первичный выход с выполненной нумерацией страниц
  2. FullViewPriceComponent - это вторичный выход и это нормально работающее диалоговое окно.

Когда я перехожу на страницу 2 в QvpPaginationContainerComponent и нажимаю кнопку, появляется всплывающее окно, но страница возвращается на первую страницу в QvpPaginationContainerComponent.

Любая помощь для этоговысоко ценится.

...