3

私はangular2アプリに取り組んでいます。私のアプリには、他のコンポーネントをロードしてルーティングを処理する appComponent があります。アプリ コンポーネントは 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(['/']);
    }
}

nav コンポーネントには、ユーザーをホームページにリダイレクトするログアウト機能があります。しかし、ログアウトページをクリックすると、

ここに画像の説明を入力

なぜスローエラーになるのか理解できません。

4

1 に答える 1

3

navigateメソッドはRouterインスタンス自体で呼び出す必要があります。

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

お役に立てば幸いです、ティエリー

于 2016-01-18T10:42:56.183 に答える