[英]Angular 2: multiple <router-outlet> for sub routes
使用Angular 2,是否可以使子路径不显示在主标签中
<router-outlet></router-outlet>
例如 :
url : "http://mywebsite.com/"
MainComponent.ts
@Component({
...
template:'<router-outlet></router-outlet>'
...
})
@RouteCongif([
{path: '/products', name:'Product', component: Product}
])
这会将子组件显示在<router-outlet>标记中
好了,现在可以进行这种配置:
url : "http://mywebsite.com/products"
ProductComponent.ts
@Component({
template: `
...
<div> My list of products ! </div>
...
<a [RouteLink]="['ProductDetails', {slug-product-details:product.slug}]">
{{ product.name }} Details
</a>
...
<sub-router-outlet></sub-router-outlet>
`
})
@RouteConfig([
{path: '/:slug-product-details', name:'ProductDetails', component: ProductDetailsComponent},
])
和
url : "http://mywebsite.com/products/one-product-details"
ProductDetailsComponent.ts
@Component({
...
template : `
<div> Details of the product : </div>
...
`
...
})
我想通过自动设计的URL保持路由器的使用,并将路由和详细信息模板显示到这种<sub-router-outlet>标记中。
谢谢您的帮助。
警告:以下代码仅适用于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
...
<a [routerLink]="['./Product-one']"> Product One </a>
<a [routerLink]="['/Home']"> Home </a>
...
其中['./Product-one']是子路由,['/ Home']是父路由
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.