WARNING:下面的代码仅适用于 Angular2 Beta
您可以实现子路由。您的文件结构应该类似于这样。
app.ts
@RouteConfig([
...
{ path: '/product/...', component: Product, name: 'Product'}
{ path: '/home', component: Home, name: 'Home'}
...
])
export class App { }
产品.ts
@Component({
selector: 'product',
templateUrl: 'app/components/product/product.html',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
...
{ path: 'product-one', component: ProductOne, name: 'Product-one' },
{ path: 'product-two', component: ProductTwo, name: 'Product-two', useAsDefault: true },
...
])
export class Product {
constructor(location: Location, public router: Router) {}
goToProductOne() {
this.router.navigate(['Product','Product-one'])
}
}
产品.html
...
<a [routerLink]="['./Product-one']"> Product One </a>
<a [routerLink]="['/Home']"> Home </a>
...
其中 ['./Product-one'] 是子路由,['/Home'] 是父路由