无法读取 Angular 中的属性 'outlets' 空值 6

Question

我正在尝试使用 routerLink 和 router-outlet，但在我的 Angular 6 项目中遇到 Cannot read property 'outlets' of null 问题。

我能够在这个简单的示例中重现问题 Angular 6 project here https://stackblitz.com/edit/angular-dk8i8y

单击路由 link 时出现错误，尽管该值是硬编码的。

<a [routerLink]="['/manage', 'plugins' ]" > Plugins </a>

能请教一下吗？

Answer 1

我不完全确定这是否可以以不同的方式完成，但是对于一个未命名的插座，这是可行的。

此外，当您更改路线时，不会再次重新创建组件，因此您需要订阅路线参数以便在路线更改时收到通知。在这些情况下，使用异步管道通常是个好主意，因为它负责在组件被销毁时取消订阅。我更新了下面的 Stackblitz：

https://stackblitz.com/edit/angular-qppimo

Answer 2

<a *ngIf="post" [routerLink]="['/posts',post?.id]">{{post?.title}}`</a>
<a *ngIf="!post">{{post?.title}}</a>

Answer 3

请注意遇到此问题的其他人；

在 Angular 7 中，我在使用 ActivatedRoute 检索不存在的参数时也遇到了这个问题。例如，如果您拨打此电话；

this.projectId = this.activatedRoute.snapshot.paramMap.get('projectId');

但如果该 ID 不同，或者在您的路由定义中不存在，您将收到此错误。

          {
            path: 'organize/:id',
            loadChildren: '../project-organize/project-organize.module#ProjectOrganizePageModule'
          },

在此示例中，我的路由指定了一个名为 id 的参数，但我在 ActivatedRoute 请求中使用了 projectId。

Answer 4

我不知道这是否对任何人有帮助，但如果您的路由数组中有任何额外的“,”，就会出现此问题。它不会在编辑器或编译中给你一个错误，因为这是数组的有效值（未定义）

这是我之前的路线

   const routes: Routes = [{
        path: "verified-employee-reviews",
        loadChildren: () => import("./verified-employee-reviews/verified-employee-reviews.module").then(m => m.VerifiedEmployeeReviewsModule)
    },
    ,
    {
        path: "verified-reviews",
        loadChildren: () =>
            import("./verified-reviews/verified-reviews.module").then(
                m => m.VerifiedReviewsModule
            )
    }]

这是我的新路线

const routes: Routes = [{
    path: "verified-employee-reviews",
    loadChildren: () => import("./verified-employee-reviews/verified-employee-reviews.module").then(m => m.VerifiedEmployeeReviewsModule)
},
{
    path: "verified-reviews",
    loadChildren: () =>
        import("./verified-reviews/verified-reviews.module").then(
            m => m.VerifiedReviewsModule
        )
}]

确保您的路线中没有任何多余的逗号。

Answer 5

tabs-routing.module.ts 文件中不必要的逗号会引发相同的错误。请确保您的文件中有足够数量的逗号。

无法读取 Angular 中的属性 'outlets' 空值 6

Cannot read property 'outlets' of null in Angular 6

angular

angular-router

无法读取 Angular 中的 属性 'outlets' 空值 6

Cannot read property 'outlets' of null in Angular 6

angular

angular-router

无法读取 Angular 中的属性 'outlets' 空值 6