Verwenden Router aus einer verschachtelten Komponente

Question

Mit Angular 2 beta.0

Ich habe eine Komponentenstruktur wie so

App (Has RouteConfig) 
-> List 
| -> ListItem (Want to use RouterLink from here) 

Dies zu einem Fehler führt: Component "List" has no route config.

Also habe ich eine RouteConfig auf die List Komponente wie so ...

@RouteConfig([ 
    {path: '/:id', name: 'Details', component: Detail} 
]) 

Aber ich bekomme einen Fehler in Winkel wie Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

Ich habe versucht, diese 3 Punkte vor und nach dem/Liste Pfad in dieser Route Konfiguration ... ohne Erfolg.

Die Dokumentation zum Router ist sehr leicht und obwohl ich weiß, das angeblich aus den ui-Router basieren, ich sehe nicht die parallele verschachtelte Routen

Answer 1

Sie können es wie folgt verwenden, um hinzuzufügen, in Stammkomponente:

@RouteConfig([ 
    {path: '/', component: HomeComponent, as: 'Home'}, 
    {path: '/list/...', component: ListComponent, as: 'List'} 
]) 

Und dann in Ihrem ListComponent, definieren Sie Ihr Kind Routen:

@RouteConfig([ 
    { path: '/:id', component: ListItem, as: 'ListItem' } 
]) 

Achten Sie auf die ListComponent hat einen <router-outlet></router-outlet> auch ..

Answer 2

Wenn das, was Sie versuchen, die Router von einem Kind-Komponente zu verwenden zu tun ist, tatsächlich zu einer Ihrer Eltern konfigurierten Routen zu gehen, dann brauchen Sie nicht jede RouterConfig zu setzen Für das untergeordnete Element müssen Sie lediglich sicherstellen, dass die Route in Ihrem übergeordneten Element korrekt konfiguriert ist, und anschließend die Konstante ROUTER_DIRECTIVES in der Direktiven-Eigenschaft Ihres untergeordneten Dekorators hinzufügen.

Es wird so etwas wie dieses:

Parent:

import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; 
     : 
    (some more imports) 
     : 
@Component({ 
     : 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS], 
     : 
}) 

@RouteConfig([ 
    {path: '/:id', name: 'Details', component: Detail} 
]) 

Kind:

import { ROUTER_DIRECTIVES } from 'angular2/router'; 
    : 
    : 
@Component({ 
    : 
    directives: [ROUTER_DIRECTIVES], 
    : 
}) 

Auch vergessen Sie nicht Ihre Router zu konfigurieren richtig indem Sie die Route angeben, die Sie senden möchten e Benutzer als ersten Parameter des Arrays und dann die Parameter hinzufügen Sie mit dem gleichen Namen man sie im RouteConfig gab der Zielroute senden möchten, wie folgt aus:

<a [routerLink]="['Details', { id: product.productId }]"> Details link </a>