Le route aux funzionano solo per il componente root?

Question

Sto riscontrando problemi nell'impostare percorsi ausiliari nei componenti figlio, per qualche motivo solo i percorsi ausiliari funzionano dal componente radice.

Ecco la mia configurazione del router

export const routes: RouterConfig = [ 
    { path: 'test1', component: Test1Component }, 
    { path: 'test2', component: Test2Component, outlet: 'aux'},   
    { path: 'shell', component: ShellComponent, children: [ 
     { path: 'department/:id', component: DepartmentDetailComponent }, 
     { path: 'test3', component: Test3Component, outlet: 'aux2' }   ] } 
]; 

Se ci si dirige verso

http://localhost:3000/shell/department/1(aux:test2) 

poi l'uscita è come previsto, vale a dire, Test2Component è reso all'interno AppComponent, insieme a ShellComponent e DepartmentDetailComponent:

Le prese primarie si presentano in blu, le prese ausiliarie in rosso.

Se, invece, cerco di passare a

http://localhost:3000/shell/department/1(aux2:test3) 

ricevo un messaggio di errore:

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'test3'

router-outlets sono i seguenti:

app.component.ts (aux : test2)

<div class="app"> 
    <h1>App</h1> 
    <div class="primary-outlet"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="aux-outlet"> 
    <router-outlet name="aux"></router-outlet> 
    </div> 
</div> 

shell.component.ts (AUX2: test3)

<div class="component"> 
    <h1>Shell</h1> 
    <div class="primary-outlet"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="aux-outlet"> 
    <router-outlet name="aux2"></router-outlet> 
    </div> 
</div> 

Che cosa mi manca?

EDIT: Come suggerito da Arpit Agarwal, la navigazione verso

http://localhost:3000/shell/(department/1(aux2:test3)) 

fa il trucco:

Tuttavia, date un'occhiata alla URL dopo caricamento della pagina. Se premo F5 ora, sono tornato al punto di partenza:

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'shell'

EDIT 2: Ecco il link to the project on github.

Answer 1

Provare a utilizzare http://localhost:3000/shell/(department/1//aux2:test3)

URL ha formato (primaryroute//secondaryroute) parentesi dice che può avere percorsi di pari livello e // è di pari livello separatore di percorso.

Aux e le prese primarie sono considerate di pari livello su stesso genitore

Answer 2

qualche esempio di lavoro click here

punti importanti

<a [routerLink]="['/component-one',{ outlets: { 'sidebar': ['component-aux'] } }]">Component One</a> 

@Component({ 
    selector: 'component-one', 
    template: `Component One 
    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div> 
    <div style="border: 2px solid blue; padding: 1rem;"> 
     <router-outlet name="sidebar"></router-outlet> 
    </div> 
    ` 
})