Angular2中的子导航

Question

我正在尝试创建一个具有 2 个（可能是 3 个）导航级别的应用程序。我正在使用@RouterConfig 创建此导航。

当我创建第一级导航时，应用程序运行良好，因此我通过相同的过程创建了第二级导航。

我要创建的导航格式如下

mainApplication (sidebar navigation)

---select (tabs)
   ---by Collection
   ---by Category
   ---by Range

---Inspect (tabs)
   ---forecast
   ---inventory
   ---purchase

---Other
   ---sublevel
   ---sublevel
   ---sublevel
---Other
   ---sublevel
   ---sublevel
---Other

我收到以下我不明白的错误...

“/inspect”不允许使用子路由。在父路由路径上使用“...”。

在此示例中，我将重点关注 Inspec 组件中的子导航。下面是代码...

app.component.ts

import { Component,OnInit}  from 'angular2/core';
import { Routes, Router, ROUTER_DIRECTIVES ,ROUTE_PROVIDERS,RouteConfig} from 'angular2/router';


//ROUTER PAGES
import {ProjectSelect}          from 'app/project.select'
import {ProjectInspect}         from 'app/project.inspect'


@Component({
    selector        :  'my-app',
    templateUrl :  'app/app.component.html',
    styleUrls   : ['app/app.component.css']
    directives  : [
                                        ROUTER_DIRECTIVES,
                                        ProjectSelect,
                                        ProjectInspect
        ]
})

@RouteConfig([
    {path: '/select',   name:'Select',  component: ProjectSelect, useAsDefault: true},
    {path: '/inspect',  name:'Inspect', component: ProjectInspect},
])


export class AppComponent implements OnInit {

    applicationTitle:String = "Slim 4 Angular"

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['Select']);
  }
}

app.component.html

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">{{applicationTitle}}</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" [routerLink]="['Select']">Select</a>
            <a class="mdl-navigation__link" [routerLink]="['Inspect']">Inspect</a>
            <a class="mdl-navigation__link">Order</a>
            <a class="mdl-navigation__link">Intelligence</a>
            <a class="mdl-navigation__link">Demand</a>
            <a class="mdl-navigation__link">Introduce</a>
            <a class="mdl-navigation__link">Update</a>
            <a class="mdl-navigation__link">Promote</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content">
            <router-outlet></router-outlet>
        </div>
    </main>
</div>

project.inspect.ts

import { Component,OnInit}  from 'angular2/core';
import { Routes, Router, ROUTER_DIRECTIVES ,ROUTE_PROVIDERS,RouteConfig} from 'angular2/router';


//ROUTER PAGES
import {WorkbenchForecast}      from 'app/workbench.forecast'
import {WorkbenchInventory}     from 'app/workbench.inventory'
import {WorkbenchPurchase}      from 'app/workbench.purchase'



@Component({
    selector        :  'project-inspect',
    templateUrl     :  'app/project.inspect.html',
    styleUrls   : ['app/app.component.css']
    directives  : [
                                        ROUTER_DIRECTIVES,
                                        WorkbenchForecast,
                                        WorkbenchInventory,
                                        WorkbenchPurchase
        ]
})


@RouteConfig([
    {path: './forecast',    name:'Forecast',    component: WorkbenchForecast, useAsDefault: true},
    {path: './inventory', name:'Inventory', component: WorkbenchInventory},
    {path: './purchase',    name:'Purchase',    component: WorkbenchPurchase},
])


export class ProjectInspect implements OnInit {

    projectTitle:String = "Inspect"

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['Forecast']);
  }
}

project.inspect.html

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="inspect/#workbenck1" class="mdl-tabs__tab" [routerLink]="['Forecast']">Forecast</a>
      <a href="inspect/#workbench2" class="mdl-tabs__tab" [routerLink]="['Inventory']">Inventory</a>
      <a href="inspect/#workbench3" class="mdl-tabs__tab" [routerLink]="['Purchase']">Purchase</a>
    </div>
    <div class="page-content">
            <router-outlet></router-outlet>
    </div>
</div>

我不确定是否可以在 Angular2 中实现两个级别的导航，但我希望可以。如果有人可以帮助我正确实施，我将不胜感激。

Answer 1

在app.component.ts 中进行以下更改：

@RouteConfig([
    {path: '/select/...',   name:'Select',  component: ProjectSelect, useAsDefault: true},
    {path: '/inspect/...',  name:'Inspect', component: ProjectInspect},
])