I have the following routes:
const appRoutes: Routes = [
{
outlet: 'primary',
path: '',
children: [
{
path: 'briefs',
children: [
{
path: '',
outlet: 'menu',
component: BrieflistMenuComponent
},
{
path: '',
outlet: 'main',
component: BrieflistComponent
}
]
},
{
path: 'brief/:id',
children: [
{
path: '',
outlet: 'menu',
component: BriefMenuComponent
},
{
path: '',
outlet: 'main',
component: BriefComponent
}
]
},
{
path: '**',
redirectTo: '/briefs',
pathMatch: 'full'
}
]
}
];
How can I navigate between briefs/
and brief/XXX/
using this.router.navigate(...)
? I tried this.router.navigate(['brief', id]);
but I get the following error: Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet
.
How to redirect all undefined paths to briefs/
?
I use Angular 5.
I finally found out by myself. For the first question, one of the two outlets should not be named. For the second question, I added { path: '**', redirectTo: '/briefs', pathMatch: 'full' }
to the children of the main ''
path.
const appRoutes: Routes = [
{
outlet: 'primary',
path: '',
children: [
{
path: 'briefs',
children: [
{
path: '',
outlet: 'menu',
component: BrieflistMenuComponent
},
{
path: '',
// outlet: 'main',
component: BrieflistComponent
}
]
},
{
path: 'brief/:id',
children: [
{
path: '',
outlet: 'menu',
component: BriefMenuComponent
},
{
path: '',
// outlet: 'main',
component: BriefComponent
}
]
},
{
path: '**',
redirectTo: '/briefs',
pathMatch: 'full'
}
]
}
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.