ionic 4 tabs starter - what does href="/tabs/(contact:contact)" do

Question

I'm exploring the new navigation in ionic 4 (type angular) and in the tabs projects you can find this

href="/tabs/(contact:contact)"

What does the

(contact:contact)

do? Is it some sort replacement for the former navParams?

Answer 1

This is just a way to specify which outlet to use, and follows the format of (outlet:path). If we specify (contact:contact) that means that we want to use the outlet with a name of contact and we also want the route path to be contact. You could define multiple paths for a single outlet, in that case, you might have a link like: /tabs/(contact:detail)

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children: [
            {
                path: 'contact',
                outlet: 'contact', //outlet
                loadChildren: '../contact/contact.module#ContactModule'
            },

            ...
       ]
   }