1

我已经使用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

ISSUE : 当弹出窗口出现时，页码不保留，页面返回第一页。

路由模块：

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>

selector app-price-site 是一个自定义的分页组件

  1. QvpPaginationContainerComponent是实现分页的主要出口
  2. FullViewPriceComponent是辅助出口，是一个运行良好的对话框。

当我导航到第 2 页QvpPaginationContainerComponent并单击该按钮时，会弹出窗口，但该页面会重置为QvpPaginationContainerComponent.

对此的任何帮助都非常感谢。

4

0 回答 0