通常のTSクラスで宣言されたときAngular2ルータのスローエラー

Question

私のクラスのコンストラクタでルータを宣言しようとすると、スローすると実行時にすべてのパラメータを解決できません。しかし、コンストラクタ外の通常の（private router: Router）コンストラクタで宣言すれば、エラーをスローしませんが、リンクをクリックすると、EXCEPTION: Cannot read property 'navigate' of undefinedがthis.router.navigate()にスローされます。コード化された

//Error: (SystemJS) Can't resolve all parameters for DataBindService: (?).(…) 
    constructor(private router: Router) { 
    } 


//EXCEPTION: Cannot read property 'navigate' of undefined 
private router: Router; 

//full class 
/// <reference path="AddedVariables.d.ts" /> 
import { Router } from '@angular/router'; 

export class DataBindService { 

    private router: Router; 

    constructor(private router: Router) { 
    } 

    moveToAnotherPage(value: string) { 
     this.router.navigate([value], { skipLocationChange: true }); 
    } 

} 

---

モジュールとサービスが追加されました。 スワップサービスは、私のnavigateメソッドを含むNgModuleで提供されています。

//NgModule where Router is in provides 
import {NgModule}  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {APP_BASE_HREF} from '@angular/common'; 
import { RouterModule, Router} from '@angular/router'; 

import {SwapService} from "./services/SwapService"; 

@NgModule({ 
    imports: [ BrowserModule ,RouterModule.forRoot([ 
     { path: '', component: Swap }, 
     { path: 'first', component: First }, 
     { path: 'secound', component: Secound }, 
     { path: 'third', component: Third } 
    ]) 
    ], 
    declarations: [ AppComponent, Swap, First, Secound, Third], 
    providers: [{provide: APP_BASE_HREF, useValue : '/' }, SwapService ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { 

} 


//the service class which have the this.router.navigate() 

/// <reference path="AddedVariables.d.ts" /> 
import {Router} from "@angular/router"; 

export class SwapService { 

    constructor(private router: Router) { } 

    moveToAnotherPage(value: string) { 
    console.log('value:%o', value); 
    this.router.navigate([value], {skipLocationChange: true}); 
    } 
} 

Answer 1

これは、@ Injectable（）として配信することで解決されました。問題は私のサービスを@ Injectable（）にしなかったことで、私のサービスは単純なtypescriptクラスでした。

/// <reference path="AddedVariables.d.ts" /> 
import {Router} from "@angular/router"; 

import {Injectable} from "@angular/core"; 

@Injectable() 
export class SwapService { 

    constructor(private router: Router) { } 

    moveToAnotherPage(value: string) { 
    console.log('value:%o', value); 
    this.router.navigate([value], {skipLocationChange: true}); 
    } 
}