Angular 2抛出错误：插座未激活

我已经设置了我的应用程序，以便我有一个Recipe Book其中有一个列表Recipies当我点击食谱时，它会显示Recipe Details在嵌套路由中。然后，它还有一个按钮，单击该按钮会将成分加载到嵌套路径中Recipes Details.

到目前为止，路由似乎有效，除非我尝试导航到另一个Recipe。如果Ingredients托盘（路线）处于活动状态，那么它将更改配方并折叠Ingredients路线，如果我然后尝试导航（不打开成分），我会收到以下错误：

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

看来我的路由器需要Ingredients处于活动状态，否则它不理解嵌套路由。这就是我的看法，但不知道如何解决它或我何时出错。

single-recipe-book-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>

成分列表.component.html

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

应用程序.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' }
];

该路由无效，您应该会收到错误消息。

{ path: '' },

一条路线要么需要有一个component, a redirectTo, or children.

如果空路径没有子路径，它也应该有pathMatch: 'full'.

我想你想要的是

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

Where DummyComponent是一个具有空视图的组件。 您可以重复使用相同的DummyComponent对于所有这些路径。