无法读取null的属性'outlet'

rom*_*ail 33 angular2-routing angular

我有下一个问题: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  {}
Run Code Online (Sandbox Code Playgroud)

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 { }
Run Code Online (Sandbox Code Playgroud)

PS有'引用反对`因为stackoverflow``-是代码.

art*_*urh 98

供将来参考:使用[routerLink]类似的数组时出现此错误['/foo', null].通过提供一个对象来代替它来修复它null.

  • 我正在做`router.navigate([url])`和`url`是`null`。这个答案是我寻找正确地点的线索!感谢arturh,感谢stackoverflow :) (2认同)

小智 11

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

<a [routerLink]="['/user', user?.id]" />user profile</a>
Run Code Online (Sandbox Code Playgroud)

user.id 是动态的,在页面初始化时,用户对象可能是null错误的。

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

<a [routerLink]="['/user', user?.id]" *ngIf="user" />user profile</a>
Run Code Online (Sandbox Code Playgroud)