是否可以在Angular2中具有多级嵌套路由

时间:2016-05-05 12:10:08

标签: angular angular2-routing angular2-directives angular2-services angular2-forms

是否可以为角度路由设置多级嵌套。我试图在下面实现,但它说[儿童路线不允许“/现金/ ..”。在父路线路径上使用“...”。

预期路线

/ storeselector / forms - 显示所有表单 / forms / cash / - 用户从表格列表中选择现金表格,并在加载时显示所有订单 / forms / cash / id:1 /显示订单详情 / forms / cash / edit / 1 edit order 1

下面是我的代码。

app组件

@Component({
    selector : 'forms-app',
    templateUrl : 'app/app.component.html', 
    styleUrls : ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS]
})
@RouteConfig([
  { path: '/storeselector', name: 'StoreSelector', component: StoreSelectorComponent, useAsDefault: true },
  { path: '/forms/...', name: 'Forms', component: FormsComponent }
])

forms component

@Component({
    selector : 'forms-root',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', name: 'Forms', component:FormsListComponent, useAsDefault: true },
    { path: '/cash/..', name: 'CashForm', component:CashFormOrderComponent, useAsDefault: false}
])
export class FormsComponent {
  constructor(private _logger : LogService) {
    this._logger.info("FormsComponent loaded");
  }
}

cashform components
@Component({
    selector : 'forms-cash',
    template: '<div></div>',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', name: 'Orders', component:CashOrdersListComponent, useAsDefault: true },
    { path: '/:id', name: 'Order', component:CashOrderComponent },
  { path: '/edit/:id', name: 'Order', component:CashOrderComponent  }
])
export class CashFormOrderComponent {
  constructor(private _logger : LogService) {
    this._logger.info("CashFormOrderComponent loaded");
  }
}

1 个答案:

答案 0 :(得分:1)

{ path: '/cash/..', name

应该是

{ path: '/cash/...', name

表示有子路线3 .是必需的