Angular 2 抛出错误 : Outlet is not activated

Question

我已经设置了我的应用程序，这样我就有了一个食谱书，其中有一个食谱列表，当我点击一个食谱时，它会显示嵌套路径中的食谱详细信息。然后，它还有一个按钮，单击该按钮可将成分加载到 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>

recipe-detail.component.html

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

ingredients-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。

如果一个空路径路由没有 child ，它也应该有 pathMatch: 'full'。

我猜你想要的是

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

其中 DummyComponent 是一个具有空 View 的组件。您可以为所有这些路径重用相同的 DummyComponent。