CODEWITHSUNDEEP
angularroutesangular-ui-router
Nicolas B
Nicolas B

Reputation: 315

Angular 2 - Child route

Got a problem with angular 2 routing, i try lots of things but i still have error message. I got this url : /project/:projectId . Project page got router-outlet and can have access to this two urls: /project/:projectId/setting /project/:projectId/add-card

So my problem is that when my url is on /project/:projectId/add-card. I try to access to my setting page with this.router.navigate(['./', 'setting']); and i still have :

Cannot match any routes: 'setting'(…)

I really don't understand how access to this from code.

This is my parents routes :

const PROJECT_ROUTES = [
    { 
        path: ':id', 
        CanActivate: [AuthGuard], 
        component: ProjectDetailComponent ,
        loadChildren: './../menu/menu.module#MenuModule',
        resolve: {
            project: ProjectResolver
        }
    },
    { 
        path: '', 
        CanActivate: [AuthGuard], 
        component: ProjectContainerComponent, 
        pathMatch: 'full' 
    }
]

This is my child routes :

const MENU_ROUTES = [
    { path: 'setting', component: MenuSettingComponent },
    { path: 'add-card', component: MenuAddCardComponent},
    { path: '', redirectTo: 'setting' },
];

and my code form switch to setting page :

onOpenMenu() {
    console.log('navigate to setting');
    this.router.navigate(['./', 'setting']);
    this.menuService.menuEvent.emit(true);
}

Thank's for your help

Upvotes: 1

Views: 296

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657078

I think you need to add another . otherwise you're navigating to /project/:projectId/add-card/setting

For relative navigation also the current route needs to be passed.

constructor(private route:ActivatedRoute){}

this.router.navigate(['../', 'setting'], {relativeTo: this.route});

Upvotes: 1

Related Questions