Angular 2 Wurffehler: Outlet ist nicht aktiviert

Question

ich meine App eingerichtet haben, so dass ich eine Recipe Book haben, die eine Liste von Recipies hat, die, wenn ich auf einem Rezept klicken Sie dann auf die Recipe Details in einer verschachtelten Route zeigt. Dies hat dann auch eine Schaltfläche, die beim Anklicken die Zutaten in einer verschachtelten Route innerhalb der Recipes Details lädt.

Bis jetzt scheint das Routing zu funktionieren, außer wenn ich versuche, zu einem anderen Recipe zu navigieren. Wenn das Ingredients Fach (Strecke) aktiv ist, dann wird es Rezept ändern und die Ingredients Strecke zusammenbrechen, wenn ich dann versuchen, und navigieren (ohne die Zutaten zu öffnen) ich die folgende Fehlermeldung erhalten:

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

Es ist wie ich sieht den Der Router benötigt Ingredients, um aktiv zu sein, oder er versteht die verschachtelte Route nicht. Das ist meine Meinung, aber ich bin mir nicht sicher, wie ich es beheben soll oder wann ich falsch gelaufen bin.

Single-Rezept-Buch-page.component.html

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

Rezept-detail.component.html

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

Zutaten-list.component.html

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

app.routes.ts (aktualisiert)

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

Diese Route ist ungültig, und Sie sollten einen Fehler für sie.

{ path: '' }, 

Eine Route muss entweder ein component haben, ein redirectTo oder children.

Wenn eine leere Pfadroute keine Kinder hat, sollte sie auch pathMatch: 'full' haben.

denke ich, was Sie wollen, ist

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

Wo DummyComponent eine Komponente mit einer leeren Ansicht ist. Sie können dieselben DummyComponent für alle diese Pfade wiederverwenden.