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: '' },

路线要么需要component，redirectTo或children。

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

我想你想要的是

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

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

Answer 2

TLDR；答案：

{
      path: ':question',
      runGuardsAndResolvers: () => false   // blocks component creation
}

在Angular路由器中有一个new feature听起来与此问题有关，但据我所知，这并不是直接解决方案。新选项为runGuardsAndResolvers = 'pathParamsChange'，它会影响Angular检查警卫和分解器的时间-并决定是否运行此出口检查。

因此，在我找到新选项之前：

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

因此，要解决此问题，我只需要以某种方式设置shouldRun == false。
shouldRun只是shouldRunGuardsAndResolvers(...)，因此，如果可以使它返回false，则不会尝试在“错误”的位置创建组件。
< / li>

因此解决方案非常简单：

 {
        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有一个few options，但是我一直使用的那个总是返回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

Answer 3

这可能有助于其他人。

我收到了这个错误。我已在路径文件中检查了所有已定义的routes， path和components已正确定义。

出现此错误的原因是我忘记在service中添加app.module.ts的引用，该引用正在我的某个组件中用于从RestApi获取数据。

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

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

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

Answer 4

对于生产 runGuardsAndResolvers：（）=> 不起作用。 Angular为 runGuardsAndResolvers 提供了新功能。

要进行工作，您可以尝试 runGuardsAndResolvers：“ pathParamsChange” 在Angular 8中进行测试可以正常工作。

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

4 个答案: