Question

我已经使用PaginationControlsDirective实现了自定义分页组件。

我有一个要求，我必须打开一个对话框组件（弹出窗口）作为分页组件的辅助出口。场景是：

具有父组件。

分页组件是主要出口。

对话框/弹出窗口是辅助出口。

分页组件的网址：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上的辅助出口

问题：弹出窗口时，页面编号不会保留，并且页面返回首页。

路由模块：

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>

选择器应用程序价格站点是自定义分页组件

QvpPaginationContainerComponent是实现分页的主要渠道
FullViewPriceComponent是辅助出口，并且是一个工作正常的对话框。

当我导航至QvpPaginationContainerComponent中的第2页并单击按钮时，会弹出弹出窗口，但该页面将重置为QvpPaginationContainerComponent中的第一页。

对此的任何帮助都将不胜感激。

导航到辅助插座时，角度+分页+页面重置为1

0 个答案: