Angular2 Verschachteltes Routing funktioniert nicht

Question

Ich arbeite an einem kleinen Testprojekt mit Angular2, wo ich ein Menü und ein Untermenü habe. Daher muss ich eine Art verschachteltes Routing für das Untermenü haben. Ich bezog mich auf angular.io Website in der Fallstudie: Tour der Helden Abschnitt konnte aber nicht erfolgreich implementieren.

Mein Hauptmenü (Navigation) hat diese Routing-Konfiguration

@RouteConfig([ 
    { path: '/letter/...', name: 'Letter', component: LetterComponent }, 
    { path: '/contact', name: 'Contact', component: ContactsComponent }, 
    { path: '/notes', name: 'Notes', component: NotesComponent } 
]) 

in der UI (Vorlage) verwendet als

<ul class="sidebar-nav"> 
    <li id="menu-title-li"> 
     <div id="menu-title" class="noselect">MENU</div> 
    </li> 
    <li> 
     <a [routerLink]="['Contacts']">Contacts</a> 
    </li> 
    <li> 
     <a [routerLink]="['/Letter','All']">Letters</a> 
    </li> 
    <li> 
     <a [routerLink]="['Notes']">Notes</a> 
    </li> 
</ul> 
<router-outlet></router-outlet> 

Letters Abschnitt wird eine Unternavigation und damit Kinder Routen haben.

Untermenü (Untermenüs) unter Buchstaben Bauteil als

@Component({ 
    selector: 'letter', 
    templateUrl: './app/Letter/template.html', 
    directives: [RouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true}, 
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' }, 
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' } 
]) 

verwendet in der Benutzeroberfläche (Template) als

<ul class="nav nav-tabs"> 
    <li role="presentation"> 
     <a [routerLink]="['All']">All</a> 
    </li> 
    <li role="presentation"> 
     <a [routerLink]="['Inwards']">Inwards</a> 
    </li> 
    <li role="presentation"> 
     <a [routerLink]="['Outwards']">Outwards</a> 
    </li> 
</ul> 
<router-outlet name="letter-outlet"></router-outlet> 

Die Hauptmenü-Werke und zeigt die entsprechende Schablone konfiguriert außer für Buchstaben. Wenn ich auf Buchstabenoption klicke, wird die entsprechende Vorlage des Untermenüs geladen, aber in der Adressleiste sehe ich noch http://localhost:3000/contact, zu der ich vorher navigiert hatte, ich erhalte den folgenden Fehler in meiner Konsole, und danach funktioniert nichts.

Ich habe viele Dinge ausprobiert, die Leute für ähnliche Probleme auf Github und Stackoverflow vorgeschlagen haben, aber nichts scheint zu funktionieren.

Wird geschachteltes Routing wirklich in angular2 unterstützt? Ich ging diesen Thread (Router Huge Flaw - Does not allow more than 1 level of nesting #6204) auf GitHub, aber half nicht. Gibt es eine Möglichkeit, dieses Problem zu umgehen?

Answer 1

Betrachtet man Kommentare zu den Fragen, die Lösung ist:

1. entfernt providers: [ROUTER_PROVIDERS] aus der untergeordneten Komponente LetterComponent die Teilrouten hat.

2. Changed

   <router-outlet name="letter-outlet"></router-outlet>

   zu

   <router-outlet></router-outlet>

Daraus ergibt sich die endgültige Struktur lautet:

AppComponent:

@Component({ 
    selector: 'my-app', 
    templateUrl: ` 
     <ul class="sidebar-nav"> 
      <li id="menu-title-li"> 
       <div id="menu-title" class="noselect">MENU</div> 
      </li> 
      <li> 
       <a [routerLink]="['Contacts']">Contacts</a> 
      </li> 
      <li> 
       <a [routerLink]="['/Letter','All']">Letters</a> 
      </li> 
      <li> 
       <a [routerLink]="['Notes']">Notes</a> 
      </li> 
     </ul> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ 
     ROUTER_DIRECTIVES 
    ], 
    providers: [ 
     ROUTER_PROVIDERS 
    ] 
}) 

@RouteConfig([ 
    { path: '/letter/...', name: 'Letter', component: LetterComponent }, 
    { path: '/contact', name: 'Contact', component: ContactsComponent }, 
    { path: '/notes', name: 'Notes', component: NotesComponent } 
]) 

LetterComponent (Kind-Komponente, die Teilrouten hat):

@Component({ 
    selector: 'letter', 
    templateUrl: ` 
     <ul class="nav nav-tabs"> 
      <li role="presentation"> 
       <a [routerLink]="['All']">All</a> 
      </li> 
      <li role="presentation"> 
       <a [routerLink]="['Inwards']">Inwards</a> 
      </li> 
      <li role="presentation"> 
       <a [routerLink]="['Outwards']">Outwards</a> 
      </li> 
     </ul> 
     <router-outlet></router-outlet> 
    `, 
    directives: [RouterOutlet, ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true}, 
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' }, 
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' } 
]) 

Beantwortung meiner Frage, wie jemand mit dem gleichen Problem könnte

Answer 2

In der Tat, wenn Sie Routing verwenden müssen Sie Routen-Definitionen in der Komponente, die Sie für Ihre Anwendung Bootstrap. Es ist kein Problem, Unterwege in anderen Komponenten zu definieren.

Sehen Sie diese Frage für weitere Informationen:

• Angular 2 : defining a Router on another Component than the bootstraped one

bearbeiten

Von Ihrem Fehler, vergessen Sie eine Route All in der Route Definition Ihrer AppComponent genannt zu definieren Klasse.