角度2投掷错误:未激活插座

Question

我已经设置了我的应用程序,以便我有一个Recipe Book列表Recipies,当我点击一个食谱然后它显示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: '' },

路线要么需要a component,a redirectTo,要么children.

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

我猜你想要的是什么

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

DummyComponent具有空视图的组件在哪里.您可以DummyComponent对所有这些路径重用相同的内容.