Angular 2 nested navigation with new router

Question

How can I achieve nested navigation? I had this with the previous router.

{ path: '/admin/...', component: AdminLayoutComponent }

It seems that from rc1 angular2 doesn't support this.

From the documentation. https://angular.io/docs/ts/latest/guide/router.html

Notice that the path ends with a slash and three trailing periods (/...).

That means this is an incomplete route (a non-terminal route). The finished route will be some combination of the parent /crisis-center/ route and a route from the child router that belongs to the designated component.

EDIT: These are my routes

//AppComponent
@Routes([
    { path: '/admin-login', component: AdminLoginLayoutComponent },
    { path: '/admin', component: AdminLayoutComponent },
    { path: '/edit', component: EditReportLayoutComponent },
    { path: '/', component: WebLayoutComponent },
])

//WebLayoutComponent
@Routes([
    { path: '/details/:id', component: DetailsComponent },
    { path: '/applications', component: ApplicationsComponent },
    { path: '/statistics', component: StatisticsComponent },
    { path: '/addreport', component: NewReportComponent },
    { path: '/register', component: RegisterComponent },
    { path: '/account', component: AccountComponent },
    { path: '/login', component: LoginComponent },
    { path: '/feed', component: AllFeedComponent },
    { path: '/', component: MapComponent }
])

EDIT: Added a minimum example on plunker http://plnkr.co/edit/4TAd436l91zGX2emsxEF?p=preview

Günter Zöchbauer · Accepted Answer · 2016-09-02 06:08:50Z

1

Just remove the /... they are not needed in the new router if you have child routes. There are still a few issues with the new router and not all features are available. One (pitfall is that the order of routes is relevant (~~will be fixed~~ by design). The most specific (longest) route should come first and the more generic one last (like /, or *)

edited Sep 2, 2016 at 6:08

answered May 13, 2016 at 20:28

Günter Zöchbauer

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

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

15 Comments

Dživo Jelić Over a year ago

So this would be the solution { path: '/admin/', component: AdminLayoutComponent },

Dživo Jelić Over a year ago

I get EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'statistics'. Available routes: ['/admin-login', '/admin', '/edit', '/']. None of the child routes is respected :)

Günter Zöchbauer Over a year ago

When doing what? A routerLink? How does it look like?

Dživo Jelić Over a year ago

[routerLink]="['/statistics']" for example

Günter Zöchbauer Over a year ago

Where is this routerLink? Please try [routerLink]="['/','statistics']"

|

Collectives™ on Stack Overflow

Angular 2 nested navigation with new router

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related