Я установил свое приложение, чтобы иметь Recipe Book
, который имеет список Recipies
, который, когда я нажимаю на Recipe, затем показывает Recipe Details
по вложенному маршруту. В этом случае также есть кнопка, которая при нажатии загружает ингредиенты по вложенному маршруту внутри Recipes Details
.
Пока работает маршрутизация, за исключением случаев, когда я пытаюсь перейти к другому Recipe
. Если лоток Ingredients
(маршрут) активен, тогда он изменит рецепт и скроет маршрут Ingredients
, если я затем попытаюсь перейти (без открытия ингредиентов), я получаю следующую ошибку:
Uncaught (in promise): Error: Outlet is not activated
Error: Outlet is not activated
Похоже, что маршрутизатору требуется Ingredients
быть активным, иначе он не понимает вложенный маршрут. То, что я беру на себя, но не знаю, как это исправить или когда я ошибся.
Стабилизаторы кулинарная книга-page.component.html
<app-tray class="recipe-list">
<app-recipe-list [recipe]="recipe"></app-recipe-list>
</app-tray>
<router-outlet></router-outlet>
Рецепт-detail.component.html
<app-tray class="recipe">
The routing has worked and loaded recipe.
</app-tray>
<router-outlet></router-outlet>
<сильные > ингредиенты-list.component.html
<app-tray class="ingredients-list">
Recipe Ingredients have loaded.
</app-tray>
app.routes.ts (обновлено)
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' }
];