Angular 2 RC5 router - nested routing - angular2-routing

Question

Structure
app |- admin
|- users
|- userList.Component.ts
|- userDetails.Component.ts
|- admin.component.html (contains 'router-oulet')
|- admin.component.ts
|- admin.routes.ts
|- admin.module.ts
|- dogs
|- app.component.html (contains 'router-oulet')
|- app.component.ts
|- app.routes.ts
|- app.module.ts
app.routes.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dogs', component: DogListComponent, canActivate: [AuthGuard] },
{ path: 'dog/:id', component: DogDetailsComponent, canActivate: [AuthGuard]},
];
export const routing = RouterModule.forRoot(appRoutes);
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
admin.userList.Component.ts
this._router.navigate(['/admin/user/', id]);
trying to navigate from AdminUserList ('admin/users') to AdminUserDetails ('admin/user/someId') but with no success.
(it seems like the scroller is going further down whenever i try to navigate to the user details)
any solution ?

Answer 1

you need to add pathMatch: 'full' in admin routes for default redirect,
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users', pathMatch: 'full' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
Update
To navigate back you have couple of ways,
// In the HTML
<a [routerLink]="['/admin']" >Back</a> or <a [routerLink]="['/admin/users']" >Back</a>
// Or create a back function and use in click binding in HTML
goBack = () => {
this.router.navigate(['/admin']);
or this.router.navigate(['/admin/users']);
}