Lỗi ném góc 2: Ổ cắm không được kích hoạt

Question

Tôi đã thiết lập ứng dụng của mình để có Recipe Book có danh sách Recipies khi tôi nhấp vào Công thức, sau đó hiển thị Recipe Details trong tuyến đường lồng nhau. Điều này sau đó cũng có một nút mà khi nhấp vào tải các thành phần trong một con đường lồng nhau bên trong Recipes Details.

Cho đến nay định tuyến có vẻ hoạt động, ngoại trừ khi tôi cố điều hướng đến một Recipe khác. Nếu Ingredients khay (đường) đang hoạt động thì nó sẽ thay đổi công thức hoặc thu nhỏ Ingredients Route, nếu tôi sau đó cố gắng và điều hướng (mà không cần mở Ingredients) tôi nhận được lỗi sau:

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

Dường như tôi các router cần Ingredients để hoạt động hoặc người nào khác không hiểu được tuyến đường lồng nhau. Thats của tôi về nó nhưng không chắc chắn làm thế nào để sửa chữa nó hoặc khi tôi đã đi sai.

đơn thức-book-page.component.html

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

recipe-detail.component.html

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

thành phần-list.component.html

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

app.routes.ts (cập nhật)

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

Tuyến đường này là không hợp lệ và bạn sẽ nhận được một lỗi cho nó.

{ path: '' }, 

Một tuyến đường hoặc cần phải có một component, một redirectTo, hoặc children.

Nếu tuyến đường dẫn trống không có con thì cũng cần có pathMatch: 'full'.

Tôi đoán những gì bạn muốn là

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

đâu DummyComponent là một thành phần với một cái nhìn trống rỗng. Bạn có thể sử dụng lại cùng một DummyComponent cho tất cả các đường dẫn này.