Angular 2投掷错误:出口未激活 [英] Angular 2 throwing error: Outlet is not activated

问题描述

我已经设置了我的应用程序，以便我有一个Recipe Book，其中有一个Recipies列表，当我单击配方"时，它会在嵌套路径中显示Recipe Details.然后，它还有一个按钮，单击该按钮可在Recipes Details内的嵌套路径中加载配料.

I have set up my app so that I have a Recipe Book which has a list of Recipies which when I click on a Recipe it then shows the Recipe Details in a nested route. This then also has a button that when clicked loads the ingredients in a nested route inside the Recipes Details.

到目前为止，除了我尝试导航到另一个Recipe之外，路由似乎都可以工作.如果Ingredients托盘(路线)处于活动状态，则它将更改配方并折叠Ingredients路线，如果然后尝试导航(未打开配料)，则会出现以下错误:

So far the routing seems to work, except when I try to navigate to another Recipe. If the Ingredients tray(route) is active then it will change Recipe and collapse the Ingredients Route, If I then try and navigate (without opening the Ingredients) I get the following error:

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

好像我的路由器需要Ingredients才能处于活动状态，否则它无法理解嵌套的路由.那就是我的看法，但不确定如何解决或何时出错.

It looks like I the router needs Ingredients to be active or else it doesn't understand the nested route. Thats my take on it but not sure how to fix it or when I went wrong.

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' }
];

推荐答案

此路由无效，您应该为此报错.

This route is invalid and you should get an error for it.

{ path: '' },

一条路线需要具有component，redirectTo或children.

A route either needs to have a component, a redirectTo, or children.

如果空路径路线中没有子路线，那么它也应该具有pathMatch: 'full'.

If an empty path route has no children it also should have pathMatch: 'full'.

我想你想要的是

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

其中DummyComponent是具有空视图的组件. 您可以为所有这些路径重复使用相同的DummyComponent.

Where DummyComponent is a component with an empty view. You can reuse the same DummyComponent for all these paths.

这篇关于Angular 2投掷错误:出口未激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！