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

score 24 · Accepted Answer

此路线无效，您应该得到一个错误。

{ path: '' },

一条路线要么需要有 a component、 aredirectTo或children。

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

我猜你想要的是

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

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

score 4 · Accepted Answer

TLDR；回答：

{
      path: ':question',
      runGuardsAndResolvers: GUARDS_RESOLVERS_DISABLED   // blocks component creation
}

全局函数在哪里GUARDS_RESOLVERS_DISABLED（避免 AOT 出现问题）。

 export function GUARDS_RESOLVERS_DISABLED() { return false; }

Angular 路由器中有一个新功能听起来与这个问题有关，但据我所知，它不是一个直接的解决方案。新选项是runGuardsAndResolvers = 'pathParamsChange'，它会影响 Angular 何时检查守卫和解析器 - 至关重要的是它是否运行此出口检查。

所以在我找到新选项之前：

我正在逐步进入角度代码 - 实际错误发生在此处（以红色突出显示）在context.outlet.component（component抛出的吸气剂在哪里）。

所以要修复我只需要以shouldRun == false某种方式进行。
shouldRun很简单，如果shouldRunGuardsAndResolvers(...)可以返回 false，那么它就不会尝试在“错误”的位置创建组件。

所以解决方案非常简单：

 {
        path: 'contactus',
        component: ContactUsComponent,

        children: [
            {
                path: 'topics',
                pathMatch: 'full'
            },
            
            {
                path: 'faq',
                component: FaqPanelComponent
            },
            
            { 
                path: 'test',
                component: ContactusTopicListComponent
            },
            {
                path: ':category',
                
                children: 
                [
                    {
                        path: ':question',
                        runGuardsAndResolvers: () => false   // blocks component creation
                    }
                ]
            }
        ]
    },

目前runGuardsAndResolvers有很多选项，但我正在使用的选项总是返回false，这相当于never真正应该成为选项的选项。但这就是我发现新路由器功能的方式:-)

此外，如果您有两个级别，则需要将其放在两个（或可能只是最高）级别：

        {
            path: ':category',
            runGuardsAndResolvers: () => false,
            
            children: 
            [
                {
                    path: ':question',
                    runGuardsAndResolvers: () => false
                }
            ]
        }

关于解析器的进一步阅读：https ://blog.angularindepth.com/new-in-angular-v7-1-updates-to-the-router-fd67d526ad05

编辑：要使其与 AOT / Angular 9/10+ 一起正常工作，您可以创建一个全局函数来避免 Sunil 提到的问题。

export function GUARDS_RESOLVERS_DISABLED() { return false; }

然后使用这个语法

runGuardsAndResolvers: GUARDS_RESOLVERS_DISABLED

score 3 · Accepted Answer

这可能对其他人有帮助。

我收到了这个错误。我已经检查了我routes在路由文件中定义的所有内容，path并且components定义正确。

出现此错误的原因是我忘记添加我service在app.module.ts其中一个组件中用于从RestApi.

providers因此，请务必在创建服务后立即在 app.module.ts 部分中添加服务引用。

imports: [
   BrowserModule,
   HttpModule,
   ......
 ],

providers: [
    AuthService, 
    ........ // Here, service reference
]

score 0 · Accepted Answer

对于生产runGuardsAndResolvers: () =>不起作用。Angular 为runGuardsAndResolvers提供了新功能。

对于工作，您可以尝试runGuardsAndResolvers: "pathParamsChange" Tested in Angular 8 工作正常。

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

4 回答 4

Related

Reference