각도 2 던지기 오류 : 아울렛이 활성화되지 않았습니다.

Question

Recipies의 목록이있는 Recipe Book을 갖도록 앱을 설정했습니다. 그러면 레서피를 클릭하면 중첩 된 경로에 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' } 
]; 

Answer 1

이 경로가 잘못되었습니다 그리고 당신은 그것을 오류가 발생합니다.

{ path: '' }, 

라우트는 중 하나 component하는 redirectTo, 또는 children 있어야합니다.

빈 경로 경로에 자식이 없으면 pathMatch: 'full'이어야합니다.

나는 당신이 원하는 것은 DummyComponent 빈 볼 수있는 구성 요소입니다

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

것 같다. 이러한 모든 경로에 대해 동일한 DummyComponent을 재사용 할 수 있습니다.