SubNavigation in Angular2

Question

Ich versuche eine Anwendung zu erstellen, die 2 (potenziell 3) Navigationsebenen hat. Ich verwende @RouterConfig, um diese Navigation zu erstellen.

Als ich die erste Ebene der Navigation erstellte, funktionierte die Anwendung gut, also ging ich durch den gleichen Prozess, um Ebene 2 der Navigation zu erstellen.

Das Navigations Format I erstellen wollen, ist wie folgt

mainApplication (sidebar navigation) 

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

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

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

ich folgende Fehlermeldung erhalte, die ich nicht verstehe ...

Kinderrouten sind nicht erlaubt für „/ inspizieren“ . Verwenden Sie "..." auf dem Routenpfad der Eltern.

In diesem Beispiel konzentriere ich mich auf die Unter-Navigation innerhalb der Inspec-Komponente. Unten ist der Code ...

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> 

Ich bin nicht sicher, ob zwei Ebenen der Navigation in Angular2 erreicht werden können, aber ich hoffe es kann. Wenn mir jemand bei der korrekten Umsetzung helfen kann, wäre ich dankbar.

Answer 1

In app.component.ts die folgende Änderung vornehmen:

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