CODEWITHSUNDEEP
angularroutes
rgoal
rgoal

Reputation: 1316

Default Routing with multiple parameters is loading component

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>

Upvotes: 2

Views: 639

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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.

Upvotes: 2

Related Questions