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.
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>
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