Default Routing with multiple parameters is loading component

Question

Default rout is not loading Tab Component be default . it only works if I replace the below code

{ path: 'tab/:id', component: TabComponent tabs }// note:works with one parameter only app.routing.ts

const appRoutes: Routes = [

    {
        path: '',
        component: NavMenuComponent, // nav component
        children: [
            {
                path: '',
                redirectTo: 'tab/' ,
                pathMatch: 'full'
            },
            {
                path: 'tab/:id/:title', 
                component: TabComponent // tabs
            }
        ]
    },

];

manu.copnent.html

 <ul class="list-unstyled list" *ngFor='let tab of tabs'>
            <li><a [routerLink]="['/tab',tab.LinkTabID,tab.TabName]" class="anchorLink"><i class="icon-home scolor"></i><font color="white">{{tab.TabName}}</font></a></li>



        </ul>

Günter Zöchbauer · Accepted Answer · 2017-03-31 05:16:14Z

2

You can't navigate to a non-existing route, and the route tab/ doesn't exist, only tab/1/foo (or whatever values you use for the parameters).

If you want to be able to navigate to tab/ you need to create such a route

const appRoutes: Routes = [

    {
        path: '',
        component: NavMenuComponent, // nav component
        children: [
            {
                path: '',
                redirectTo: '/tab' ,
                pathMatch: 'full'
            },
            {
                path: 'tab', 
                component: TabComponent // tabs
            }
            {
                path: 'tab/:id/:title', 
                component: TabComponent // tabs
            }
        ]
    },

];

You should be aware that navigating from tabs/ to tabs/1/foo TabComponent is destroyed and recreated while navigating from tabs/1/foo to tabs/2/bar TabComponent is reused.

edited Mar 31, 2017 at 5:16

answered Mar 30, 2017 at 17:41

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rgoal Over a year ago

still the same issue,Default rout is not loading Tab Component (it does not even hit the constructor). it only works when I click on a menu item.

Günter Zöchbauer Over a year ago

Try redirectTo: '/tab' with a leading / like in my updated answer, otherwise it's trying to navigate to a child of the '' route.

rgoal Over a year ago

tried this with no luck: { path: '', redirectTo: '/tab/', pathMatch: 'full' },

Günter Zöchbauer Over a year ago

Can you try to reproduce in Plunker? Plunker has a ready-to-use Angular2 template.

Collectives™ on Stack Overflow

Default Routing with multiple parameters is loading component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related