Я реализовал пользовательский компонент разбивки на страницы, используя 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 - это пользовательский компонент разбиения на страницы
QvpPaginationContainerComponent
- это первичный выход с выполненной нумерацией страниц FullViewPriceComponent
- это вторичный выход и это нормально работающее диалоговое окно.
Когда я перехожу на страницу 2 в QvpPaginationContainerComponent
и нажимаю кнопку, появляется всплывающее окно, но страница возвращается на первую страницу в QvpPaginationContainerComponent
.
Любая помощь для этоговысоко ценится.