无法读取 null 的属性“出口”答案

【问题标题】：Cannot read property 'outlets' of null无法读取 null 的属性“出口”
【发布时间】：2016-12-22 15:30:11
【问题描述】：

我有下一个问题：Cannot read property 'outlets' of null。我的项目有效，但一段时间后它停止工作，但我没有更改我的代码。请帮助我。
更新
我的带有路由器插座的组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: '
    <nav-menu></nav-menu>
    <router-outlet></router-outlet>
    <footer-component></footer-component>

',
})
export class AppComponent  {}

app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LocationStrategy, PathLocationStrategy, APP_BASE_HREF } from       '@angular/common';
import { HttpModule } from '@angular/http';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
//+components
@NgModule({
    imports:
    [
        BrowserModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot([
            { path: '', component: HomeComponent },
            { path: 'home', component: HomeComponent },
            { path: 'blog', component: BlogComponent },
            { path: '2016/:link', component: BlogArticleFullComponent },
            {
                path: 'admin', component: AdminComponent, 
                children: [
                    { path: 'new', component: NewArticleComponent },
                    { path: 'new-writer', component: NewWriterComponent },
                    { path: 'new-tag', component: NewTagComponent }
                ] },
            { path: '**', redirectTo: '', pathMatch: 'full'}
        ])
    ],
    declarations:
    [//components
    ],
    bootstrap:
    [
        AppComponent
    ],
    providers:
    [
        { provide: APP_BASE_HREF, useValue: '/' },
        { provide: LocationStrategy, useClass: PathLocationStrategy }
    ]
})
export class AppModule { }

附：有 ' 引用 ` 因为 stackoverflow ``-is 代码。

【问题讨论】：

欢迎来到 StackOverflow。任何人都无法通过这些信息来诊断问题。
向我们展示一些代码...您调用outlets的部分
你想看哪个代码？错误发生在 1) core.umd.js:2838 2) core.umd.js:2843 3) core.umd.js:2844 4) Subscriber.ts:241
我从来没有写过outlets自己
你很可能在某个地方有一个与该问题相关的 ...向我们展示一些带有 app.module 的路由器调用，可能是从某个地方开始

标签： angular angular2-routing

【解决方案1】：

供将来参考：在将[routerLink] 与看起来像['/foo', null] 的数组一起使用时出现此错误。通过提供一个对象而不是 null 来修复它。

【讨论】：

我在做router.navigate([url]) 而url 是null。这个答案是我去寻找正确位置的线索！谢谢阿图尔，谢谢stackoverflow :)
是的，几乎可以肯定是 OP 的数据问题。当我提供给路由器链接阵列的值意外丢失时，我遇到了这个问题。当代码中断而不更改代码时，请查看您的数据。
投票支持 null :) github.com/angular/angular/issues/32614
在我的例子中，我实际上构造了一个对象并将 id 属性设置为 null。通过将 id 设置为字符串来解决它。其他信息在这里newbedev.com/cannot-read-property-outlets-of-null-in-angular-4

【解决方案2】：

大多数情况下，这与您的路由配置无关，而是在您尝试将动态数据作为参数传递给路由时发生。

<a [routerLink]="['/user', user?.id]" />user profile</a>

user.id 是动态的，在页面初始化时，用户对象可能是null，因此会出现错误。

对此的快速解决方法是向链接添加 ng-if，这将强制链接仅在用户对象可用时才初始化。

<a [routerLink]="['/user', user?.id]" *ngIf="user" />user profile</a>

【讨论】：

【解决方案3】：

当您自动生成 routerLink 并添加此属性时有时会发生这种情况routerLinkActive="router-link-active" 删除它会解决您的问题。

【讨论】：

【解决方案4】：

我的解决方案是先进行空检查，即。 row?.driverId

<a [routerLink]="['/admin/driver/view', row?.driverId]">{{value}}</a>

【讨论】：

【解决方案5】：

即使使用空检查运算符也有同样的问题：

                <a
                    [routerLink]="[
                        '/page/',
                        organizationSettings?.organisation_name_slug
                    ]"
                    >

通过将 *ngIf 添加到元素来解决它：

                <a
                    *ngIf="organizationSettings"
                    [routerLink]="[
                        '/page/',
                        organizationSettings.organisation_name_slug
                    ]"
                    >

【讨论】：

谢谢 - 您的解决方案帮我解决了这个问题。