无法读取 angular2 中 null 的属性 'navigate'

Question

我正在开发 angular2 应用程序。在我的应用程序中，我有 appComponent 加载其他组件并处理路由。 App 组件也加载 nav 组件。这是我的 app.html

<nav></nav>
<div class="container">
    <router-outlet></router-outlet>
</div>

这是我的appComponent.ts

import {Component, View, Inject} from 'angular2/core';

import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';

import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
import {DashboardComponent} from '../dashboard/dashboard';
import {ProjectComponent} from '../project/project';
import {NewProjectComponent} from '../project/newproject';
import {EffortComponent} from '../effort/effort';
import {ProfileComponent} from '../profile/profile';
import {DemoComponent} from '../demo/demo';
import {LeaveComponent} from '../leave/leave';
import {NavComponent} from '../nav/nav';

import {GlobalDataService} from '../../services/globalDataService';


@Component({
    selector: 'app',
})
@View({
    templateUrl: '/scripts/src/components/app/app.html',
    directives: [RouterLink, RouterOutlet, NavComponent]
})
export class AppComponent {
    devIsLogin: boolean;
    Dev: {};
    globalDataService: any
    constructor(
        @Inject(Router) private router: Router
    ) {
        this.globalDataService = GlobalDataService
        this.globalDataService.devIsLogin = false;
        router.config([
            { path: '', component: HomeComponent, as: 'Home' },
            { path: '/login', component: LoginComponent, as: 'Login' },
            { path: '/dashboard', component: DashboardComponent, as: 'Dashboard' },
            { path: '/project', component: ProjectComponent, as: 'Project' },
            { path: '/newproject', component: NewProjectComponent, as: 'NewProject' },
            { path: '/effort', component: EffortComponent, as: 'Effort' },
            { path: '/profile', component: ProfileComponent, as: 'Profile' },
            { path: '/demo', component: DemoComponent, as: 'Demo' },
            { path: '/leave', component: LeaveComponent, as: 'Leave' },
        ]);
    }
}

这是我的nav.html

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" [routerLink]="['/Home']">Track Me !!</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a [routerLink]="['/Home']">Home</a>
                </li>
                <li>
                    <a *ngIf="!globalDataService.devIsLogin" [routerLink]="['/Login']">Login</a>
                </li>
                <li>
                    <a *ngIf="globalDataService.devIsLogin" [routerLink]="['/Dashboard']">Dashboard</a>
                </li>
                <li>
                    <a [routerLink]="['/Demo']">Demo</a>
                </li>
            </ul>
             <ul class="nav navbar-nav pull-right"  *ngIf="globalDataService.devIsLogin">
                <li>
                    <a [routerLink]="['/Dashboard']">{{globalDataService.dev.fName}}</a>
                </li>
                <li>
                    <a (click)="logout()">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

这是我的navcomponent.ts

import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouterLink} from 'angular2/router';

import {GlobalDataService} from '../../services/globalDataService';

@Component({
    selector: 'nav',
})
@View({
    templateUrl: '/scripts/src/components/nav/nav.html',
    directives: [RouterLink,  NgIf]
})
export class NavComponent {
    globalDataService: any
    constructor(
        @Inject(Router) private router: Router
    ) {
        this.globalDataService = GlobalDataService;
    }
    logout() {
        this.router.parent.navigate(['/']);
    }
}

在导航组件上，我有注销功能，可以将用户重定向到主页。但是当我点击注销页面时，它给出了

我不明白为什么会抛出错误。

Answer 1

应该在 Router 实例本身上调用 navigate 方法：

selectCompany(company:Company) {
  this.router.navigate( [ 'Details', { id: company.id }] );
  return false;
}

希望对你有帮助，蒂埃里

无法读取 angular2 中 null 的属性 'navigate'

Cannot read property 'navigate' of null in angular2

angular

angular2-routing

无法读取 angular2 中 null 的 属性 'navigate'

Cannot read property 'navigate' of null in angular2

angular

angular2-routing

无法读取 angular2 中 null 的属性 'navigate'