angular2 是否支持嵌套 states/routes?
Does angular2 support nested states/routes?
angular2支持嵌套吗states/routes?
例如,在一个视图端口中有 2 个 link,在单击特定的 link 时,它将显示一个视图,该视图还有一个以上的 link,但特定于早期的 link.
是的。
我做了一些演示:
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 {
}
这是文档:https://angular.io/docs/ts/latest/guide/router.html#!#child-router
请注意持久性标签存在问题:Angular2 Routing: persisting route tabs and child routes
https://github.com/angular/angular/issues/6634
有了新版本的路由器,如果你想使用嵌套路由,
这是一个关于如何定义路径的例子
{
path: 'search',
component: SearchComponent,
children: [
{ path: 'results/:id', component: ResultsComponent },
]
}
并在您的 SearchComponent 模板中添加 <router-outlet></router-outlet>
angular2支持嵌套吗states/routes? 例如,在一个视图端口中有 2 个 link,在单击特定的 link 时,它将显示一个视图,该视图还有一个以上的 link,但特定于早期的 link.
是的。
我做了一些演示: 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 {
}
这是文档:https://angular.io/docs/ts/latest/guide/router.html#!#child-router
请注意持久性标签存在问题:Angular2 Routing: persisting route tabs and child routes https://github.com/angular/angular/issues/6634
有了新版本的路由器,如果你想使用嵌套路由, 这是一个关于如何定义路径的例子
{
path: 'search',
component: SearchComponent,
children: [
{ path: 'results/:id', component: ResultsComponent },
]
}
并在您的 SearchComponent 模板中添加 <router-outlet></router-outlet>