Поднавигация в Angular2

Question

Я пытаюсь создать приложение, которое имеет 2 (потенциально 3) уровня навигации. Я использую @RouterConfig для создания этой навигации.

Когда я создал первый уровень навигации, приложение работало нормально, поэтому я прошел один и тот же процесс, чтобы создать уровень 2 навигации.

Формат навигации Я хочу создать следующим образом

mainApplication (sidebar navigation) 

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

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

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

Я получаю следующее сообщение об ошибке, которую я не понимаю ...

по уходу за детьми маршруты не разрешены для «/ инспектировать» , Используйте «...» на пути маршрута родителя.

В этом примере я фокусируюсь на суб-навигации в компоненте 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}, 
])