Błąd rzucania kątowego 2: Wyjście nie jest aktywne

Question

Skonfigurowałem swoją aplikację, aby mieć Recipe Book z listą Recipies, która po kliknięciu na recepturze pokazuje Recipe Details w zagnieżdżonej trasie. To ma również przycisk, który po kliknięciu ładuje składniki w zagnieżdżonej trasie wewnątrz Recipes Details.

Do tej pory routing wydaje się działać, z wyjątkiem sytuacji, gdy próbuję przejść do innego Recipe. Jeśli taca Ingredients (trasa) jest aktywny wtedy będzie zmienić przepis i zwinąć Ingredients trasa, jeśli I spróbuj i nawigacja (bez otwierania składników) pojawia się następujący błąd:

Uncaught (in promise): Error: Outlet is not activated 
Error: Outlet is not activated 

to wygląda I do router potrzebuje Ingredients, aby być aktywnym lub nie rozumie zagnieżdżonej trasy. To jest moje podejście, ale nie wiem, jak to naprawić lub gdy popełniłem błąd.

single-recepta-book-page.component.html

<app-tray class="recipe-list"> 
    <app-recipe-list [recipe]="recipe"></app-recipe-list> 
</app-tray> 
<router-outlet></router-outlet> 

przepis-detail.component.html

<app-tray class="recipe"> 
    The routing has worked and loaded recipe. 
</app-tray> 
<router-outlet></router-outlet> 

składniki-list.component.html

<app-tray class="ingredients-list"> 
    Recipe Ingredients have loaded. 
</app-tray> 

app.routes.ts (aktualizacja)

export const routerConfig : Route[] = [ 
    { 
    path: 'recipe-books', 
    children: [ 
     { 
     path: ':id', component: SingleRecipeBookPageComponent, 
     children: [ 
      { 
      path: 'recipes', 
      children: [ 
       { path: ':id', component: RecipeDetailComponent, 
       children: [ 
        { path: '', component: IngredientsListComponent }, 
        { path: 'ingredients', component: IngredientsListComponent } 
       ] 
       }, 
       { path: 'new', component: IngredientsListComponent }, 
       { path: '', component: RecipeDetailComponent } 
      ] 
      }, 
      { path: '', redirectTo: 'recipes', pathMatch: 'full' } 
     ] 
     }, 
     { path: '', component: RecipeBooksPageComponent } 
    ] 
    }, 
    { path: 'ingredients', component: IngredientsComponent }, 
    { path: '', redirectTo: 'recipe-books', pathMatch: 'full' }, 
    { path: '**', redirectTo: 'recipe-books', pathMatch: 'full' } 
]; 

Answer 1

Trasa ta jest nieważna i należy się błąd za nim.

{ path: '' }, 

Trasa albo musi mieć component, A redirectTo lub children.

Jeśli pusta ścieżka nie ma dzieci, powinna również mieć pathMatch: 'full'.

Chyba to, co chcesz

{ path: '', component: DummyComponent, pathMatch: 'full' }, 

Gdzie DummyComponent jest elementem pustym widzenia. Możesz użyć tego samego DummyComponent dla wszystkich tych ścieżek.