Does angular2 support nested states/routes?

Question

Does angular2 support nested states/routes? for example in a view port there are 2 links and on clicking a specific link it will present a view which with further have more than one link but that are specific to earlier link.

Yes it is possible http://stackoverflow.com/questions/34363176/use-routerlink-from-a-nested-component — Hiranya Reddy Guntaka, Jan 24 '16 at 20:41

ThomasP1988 · Answer 1 · 2017-01-12T09:59:38.527

51

With the new version of the router, If you want to use nested routes, here is an example on how to define the path

{
    path: 'search',
    component: SearchComponent,
    children: [
        { path: 'results/:id',  component: ResultsComponent },
    ]
}

and in your SearchComponent template, add <router-outlet></router-outlet>

edited Jan 12 '17 at 09:59

answered Jul 20 '16 at 13:48

ThomasP1988

4,597
3
30
36

77

The NG2 Router API deprecates quicker than the milk in my fridge. – Léon Pelletier Oct 18 '16 at 16:58
3

During the beta and RC yes, not that the full release is out it should be stable. – Erik Honn Oct 20 '16 at 07:47
What about if you want multiple children, say a navbar and a content-area? – Jackie Nov 12 '16 at 15:48
2

NM This helped... http://blog.angular-university.io/angular-2-router-nested-routes-and-nested-auxiliary-routes-build-a-menu-navigation-system/ – Jackie Nov 12 '16 at 15:52
Is it necessary to define { path: ' ' } default route in children? Why if yes? – saurav1405 Dec 06 '16 at 07:45
no, it's not. I used it to be able to have the two routes /search and /search/:id, otherwise you get an error on /search – ThomasP1988 Dec 06 '16 at 10:40
Edit : the { path: ' ' } provides a bug in the new version of the router, and is not necessary anymore – ThomasP1988 Jan 12 '17 at 10:00

score 25 · Accepted Answer · edited May 23 '17 at 12:03

Yes.

I made some demo: http://plnkr.co/edit/IcnEzZ0WtiaY5Bpqrq2Y?p=preview

import {Component, View, Input} from 'angular2/core';
import {
    RouteConfig, Router, RouteParams, ROUTER_DIRECTIVES
} from 'angular2/router';
import {PersistentRouterOutlet} from './persistent-router-outlet';


@Component({})
@View({
  template: 'product info here'
})
class ProductInfo {
}

@Component({})
@View({
  template: 'buy here'
})
class ProductBuy {
}


@Component({})
@View({
  directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet],
  template: `
    <div>
      <h2>Product {{pid}}</h2>
      <a [routerLink]="['Info']">Show Info</a>
      <a [routerLink]="['Buy']">Go Buy</a>
      <div>
        <router-outlet></router-outlet>
      </div>
    </div>
  `
})
@RouteConfig([
  {path: '/info', name: 'Info', component: ProductInfo, useAsDefault: true}
  {path: '/buy', name: 'Buy', component: ProductBuy}
])
class Product {
  pid
  constructor(params: RouteParams) {
    this.pid = params.get('pid')
  }
}

@Component({})
@View({
  directives: [...ROUTER_DIRECTIVES],
  template: `
    info about the store
  `
})
class StoreInfo {
}


@Component({
  selector: 'my-app',
  providers: [],
  directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet] ,
  template: `
    <div>
      <a [routerLink]="['./StoreInfo']">See Store Info</a>
      <a [routerLink]="['./Product', {pid:1}]">See Product 1</a>
      <a [routerLink]="['./Product', {pid:2}]">See Product 2</a>
      <div>
        <persistent-router-outlet></persistent-router-outlet>
      </div>
    </div>
  `
})
@RouteConfig([
  {path: '/', name: 'StoreInfo', component: StoreInfo, useAsDefault: true}
  {path: '/product/:pid/...', name: 'Product', component: Product}
])
export class App {
}

Here's the doc: https://angular.io/docs/ts/latest/guide/router.html#!#child-router

Note there's a problem with persistent tabs: Angular2 Routing: persisting route tabs and child routes https://github.com/angular/angular/issues/6634

Does angular2 support nested states/routes?

2 Answers2

Linked