Usa RouterLink da un componente nidificato

Question

Utilizzando angolare 2 beta.0

ho una struttura dei componenti in questo modo

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

Ciò si traduce in un errore: Component "List" has no route config.

così ho messo un RouteConfig su la componente List in questo modo ...

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

Ma io ottenere un errore in angolare come Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

Ho provato ad aggiungere questi 3 punti prima e dopo il percorso/elenco in quella configurazione di percorso ... senza successo.

La documentazione sul router è molto leggero e anche se so che questo dovrebbe essere in base al largo di ui-router, non sto vedendo il parallelo di aggiungere percorsi annidati

Answer 1

è possibile utilizzarlo in questo modo, in componente principale:

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

E poi nel vostro ListComponent, definire i percorsi bambino:

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

assicurarsi che il ListComponent ha un <router-outlet></router-outlet> come pure ..

Answer 2

Se ciò che si sta cercando di fare è quello di utilizzare il routerLink da un componente figlio di andare effettivamente a uno dei percorsi configurati dei tuoi genitori, allora non c'è bisogno di mettere qualsiasi RouterConfig sul bambino, devi solo assicurarti che il percorso sia configurato correttamente in genitore e quindi aggiungere la costante ROUTER_DIRECTIVES nella proprietà delle direttive del bambino all'interno del decoratore del bambino.

Sarà qualcosa di simile:

principale:

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} 
]) 

bambini:

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

Inoltre, non dimenticare di configurare il routerLink correttamente fornendo il percorso che si desidera inviare th e utente come primo parametro della matrice e quindi aggiungere i parametri che si desidera inviare al percorso di destinazione utilizzando lo stesso nome loro vi ha dato nel RouteConfig, in questo modo:

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