In tabs application, I display a modal and I would like to use ion-router-outlet to display ‘subviews’.
This is my github repo to reproduce the issue:
Some sample of code here:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="dismiss()">Cancel</ion-button>
</ion-buttons>
<ion-title>test-modal</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-button [routerLink]="subview1">Subview 1</ion-button>
<ion-button routerLink="subview2">Subview 2</ion-button>
<ion-button routerLink="subview3">Subview 3</ion-button>
<ion-button routerLink="['', {outlets:{subviews:'subview1' } } ]">subviews:Subview 1</ion-button>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-router-outlet name="subviews"></ion-router-outlet>
</ion-content>
const routes: Routes = [
{
path: '',
component: TestModalPage,
children: [
{
path:'subview1',
component:Subview1Page,
outlet:'subviews'
},
{
path:'subview2',
component:Subview2Page,
outlet:'subviews'
},
{
path:'subview3',
component:Subview3Page,
outlet:'subviews'
}
]
}
];
async openModal() {
const modal = await this.modalCtrl.create({
component: TestModalPage,
swipeToClose: true,
showBackdrop: true,
// cssClass: 'cssResourceModal',
presentingElement: this.routerOutlet.nativeEl,
componentProps: { mode: 'test' }
});
await modal.present();
const { data } = await modal.onWillDismiss();
if (data) {
}
What is wrong ?