Question

我有下一个问题：Cannot read property 'outlets' of null。我的项目有效，但一段时间后它停止工作，但我没有改变我的代码。请帮帮我的更新
我的组件有router-outlet：

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 { }

P.S。有'引用`因为stackoverflow``-is code。

Answer 1

供将来参考：使用[routerLink]时，如果数组看起来像['/foo', null]，则会出现此错误。通过提供对象而不是null来修复它。

Answer 2

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

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

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

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

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

Answer 3

我的解决方案是先做一个空检查。行？.driverId

ms.someParams.otherVariable

Answer 4

即使使用null检查运算符，也会遇到相同的问题：

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

通过在元素中添加* ngIf来解决该问题：

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

Answer 5

当您自动生成routerLink并添加此属性routerLinkActive="router-link-active"时，有时会发生这种情况。

无法读取null的属性'outlet'

5 个答案: