角度2:倍数<路由器出口>子路线
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}
])
这将子组件显示为<路由器出口>标签
好吧,现在有可能有这样的配置:
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保持路由器的使用,并将路由和细节模板放入这种<子路由器出口>标签
谢谢你的帮助。
警告:以下代码仅适用于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'])
}
}
product.html
...
<a [routerLink]="['./Product-one']"> Product One </a>
<a [routerLink]="['/Home']"> Home </a>
...
其中['./Product-one']是子路线,['/Home']是父路线
相关文章:
- 在<页眉>标签
- 如何更改<svg>标记为<img>用js标记
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- Ajax文件加载和<输入>文件加载
- 为什么要使用0>javascript中的0
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 链接所有<a>Meteor
- 在<输入类型=“;文件“/>
- Div根据<选择>菜单
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- 如何首先设置样式<td>表中包含在窗体中的元素
- 通过点击<李>在jQuery中
- 正在检测导航到<a name=“;最新主题”></a>
- 将所选类别循环到ul>李用加载更多按钮
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用下拉列表筛选列表(ul>li)
- 这个问号在Flow中意味着什么:“;?()=>“无效”;
- 如何附加<ul><李>元素位于某个特定条件的父元素列表之间
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 角度2:倍数<路由器出口>子路线