Angular 2:子路由的多个<router-outlet>

使用Angular 2,是否可以使子路径不显示在主标签中

例如 :

url : "http://mywebsite.com/"
MainComponent.ts
@Component({
    ...
    template:''
    ...
})
@RouteCongif([
    {path: '/products', name:'Product', component: Product}
])

这会将子组件显示在标记中

好了,现在可以进行这种配置:

url : "http://mywebsite.com/products"
ProductComponent.ts
@Component({
    template: `
        ...
        
 My list of products ! 
        ...
         
           {{ product.name }} Details 
        
        ...
        
    `
})
@RouteConfig([
     {path: '/:slug-product-details', name:'ProductDetails', component: ProductDetailsComponent},
])

和

url : "http://mywebsite.com/products/one-product-details"
ProductDetailsComponent.ts
@Component({
    ...
    template : `
         
 Details of the product : 
         ...
    `
    ...
})

我想通过自动设计的URL保持路由器的使用,并将路由和详细信息模板显示到这种标记中.

谢谢您的帮助.

警告:以下代码仅适用于Angular2 Beta

您可以实现子路由.您的文件结构应该类似于此.

app.ts

@RouteConfig([
    ...
    { path: '/product/...', component: Product, name: 'Product'}
    { path: '/home', component: Home, name: 'Home'}
    ...
])
export class App { }

product.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'])
    }
}

product.html

...
 Product One 
 Home 
...

其中['./Product-one']是子路由,['/ Home']是父路由