My app (Ionic 4, Angular) is split into lazy loaded features. A number of features have common data shared by each page, for example all pages in the ‘vehicle’ feature need the current selected vehicle, which is retrieved by the ‘id’ in the url.
I have a parent route for the feature that gets the common data and child routes below that actually drive the pages -
Feature Module Route Config sample:
const routes: Routes = [
{
path: ':id',
component: VehiclePage,
children: [
{
path: 'set-info',
component: SetInfoPage
},
{
path: 'success',
component: SuccessPage
},
{
path: '',
component: DashboardPage
}
]
}
VehiclePage sample:
@Component({
selector: 'app-vehicles',
template: '<router-outlet></router-outlet>'
})
export class VehiclePage implements OnInit {
constructor(
private route: ActivatedRoute,
private store: Store<fromRoot.AppState>
) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.store.dispatch(new vehicleActions.Get(params['id']))
})
}
}
Aaaaaaanyway. The setup is working fine, the child page loads, data is available, everyone’s happy, except…
The parent page, in this case ‘VehiclePage’ has the ion-page class applied, which pushes the child page content off screen. When I remove the ion-page class it looks ok but I’m wary about removing that class from across the app.
With ion-page class, content is pushed off screen:
Without ion-page class it’s fine:
I haven’t seen any examples of this routing config for Ionic though it’s common in Angular.
If there’s any advice on -
- Anything I’m doing wrong
- The impact of removing the ion-page class (and how to do it cleanly)
- Working examples of a similar solution
- Anything else that might help
it’s greatly appreciated!
Cheers,
Andrew
