无法读取属性'；导航'；在angular2中为空

我正在开发angular2应用程序。在我的应用程序中，我有一个appComponent，它加载另一个组件并处理路由。应用程序组件也加载导航组件。 这是我的app.html

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

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

这是我的nav.html

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

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

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

---

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

应在

路由器

实例本身上调用

导航

方法：

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

希望它能帮助你，

---

Thierry

但在我的应用程序中，我使用了这个.router.parent.navigate（['/'）；还有一个很好的解决方案，就是如何在应用程序的其他部分中使用子路由。我认为

parent

属性允许您从子路由器引用父路由器。它是否与

this.router.navigate（['/'））一起工作？