Question

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

我能够在这个简单的Angular 6项目示例中重新创建问题 https://stackblitz.com/edit/angular-dk8i8y

单击路径链接时会出现错误，但该值是硬编码的。

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

你能告诉我吗？

Answer 1

我不完全确定这是否可以采用不同的方式，但如果使用未命名的插座则可行。

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

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

Answer 2

我不知道这对任何人都没有帮助，但是如果您的路由数组中有多余的“，”，那么这个问题就会出现。它不会给您造成编辑器或编译错误，因为这是数组的有效值（未定义）

这是我以前的路线

   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 3

请其他有此问题的人注意

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

ActivatedRoute

但是，如果该ID不同，或者您的路由定义中不存在该ID，则会出现此错误。

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

在此示例中，我的路线指定了一个名为{ path: 'organize/:id', loadChildren: '../project-organize/project-organize.module#ProjectOrganizePageModule' },的参数，但是我在ActivatedRoute请求中使用了id。

Answer 4

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

Answer 5

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

无法阅读酒店和网点＃39;在Angular 6中为null

5 个答案: