Ionic2 router nested or named views

Ionic Framework ionic-v3
1

Hello everyone. Is there way to use nested or named views in ionic2 ?

I want to create global component which will not reload during transitions from page to page. I try to use angular2 router but got an error.

EXCEPTION: Component “MyApp” has no route config. in [[‘home’] in MainPage@1:7]

Code example:

Live example here

bootstrap.ts

main.page.ts

home.page.ts

settings.page.ts

Code for copy-paste on plunker

2

This is not really how things work in an Ionic2 app.
You don’t really need router-outlet or a router in general for this.

3

Thank you for your answer. I understand this. I know about navigation with nav.setRoot or nav.push, but it does not solve my problem.

I have a custom navbar component which includes user info which is obtained from service.

If I place navbar component on each page, then user info will be checked at each page change. Due to it user info flashes.

How can I avoid this with default ionic2 navigation?

4

Well you really shouldn’t have a custom navBar component, the default ion-navbar should be enough for make cases.

There’s probably a better solution than call the user services every time you want to get user info

5

Unfortunately, default ion-navbar not suitable for my case. I need pixel perfect design.

Maybe, somehow, I can put my navbar component to bootstrap.ts before ion-nav (first screen) ?

I try it, but received an error
EXCEPTION: Cannot resolve all parameters for ‘NavController’(?, ?, ?, ?, ?, ?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘NavController’ is decorated with Injectable.