Angular2注射可能なサービスでルータを使用する

Question

サービス内のルータオブジェクトを使用して、別のルートに移動することを許可します。このコードは、私がExternalService内のルータをインスタンス化することはできませんと言って失敗している

@Injectable() 
export class ExternalService { 
    constructor (_router: Router) {} 
    ... 
} 

：

@Component({ 
    selector: "app", 
    templateUrl: "app/app.html", 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    { 
    path: "/home", 
    name: "Homepage", 
    component: HomepageComponent, 
    useAsDefault: true 
    },{ 
    path: "/home2", 
    name: "Homepage2", 
    component: HomepageComponent2 
    } 
]) 
export class AppComponent { 
    constructor (private _externalService: ExternalService) {} 

} 

とExternalService：

私AppComponentは、このように見ています。私はこれがRouteConfigが利用できないためだと考えています。私はAppComponentコンストラクタ内に_router: Routerを追加しようとしましたが、それはそこで動作します。 ExternalServiceの中でRouterインスタンスを使用するにはどうすればよいですか？

EDITは：

import { bootstrap } from "angular2/platform/browser" 
import { ROUTER_PROVIDERS } from "angular2/router" 
import { ExternalService} from "./utils/external.service" 
import { AppComponent } from "./app.component" 
import { HTTP_PROVIDERS } from "angular2/http" 

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, ExternalService, provide(LocationStrategy, {useClass: HashLocationStrategy})]) 

Answer 1

あなたbootstrap()でExternalServiceを提供している、そしてあなたも、そこROUTER_PROVIDERSを提供する必要があります。ここに私のアプリのブートストラップファイルです。それ以外の場合は角度は、例えば、使用のためのあなたのExternalService.

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    ExternalService 
]); 

PlunkerためRouterをインスタンス化する方法を知らない

Answer 2

は直接にルータを注入するために正常に動作ようです（正常に動作するようです）サービス。私はまた、ルート・コンポーネントに注入し、サービスに渡すことを試みたが、直接的な方法が動作しているとき、私は私のブートストラップと私のポストを更新した必要

import {Component, Injectable, provide} from '@angular/core'; 
import {Router, Routes, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 

@Injectable() 
export class ExternalService { 
    //router:Router; 
    constructor (private router: Router) {} 

    navigate() { 
     this.router.navigate(['/article']); 
    } 
} 


@Component({ 
    selector: 'root', 
    template: ` 
    <h2>Root</h2> 
    `, 
}) 
export class RootComponent { 
} 


@Component({ 
    selector: 'article', 
    template: ` 
    <h2>Article</h2> 
    `, 
}) 
export class ArticleComponent { 
} 


@Component({ 
    selector: 'my-app', 
    providers: [ExternalService, ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})], 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <router-outlet></router-outlet> 
    </div> 
    <button (click)="externalService.navigate()">Article</button> 
    `, 
}) 
@Routes([ 
    { path: '/article', component: ArticleComponent }, 
    { path: '/', component: RootComponent } 
    ]) 
export class App { 
    constructor(private externalService: ExternalService) { 
    //externalService.router = router; 
    this.name = 'Angular2 (Release Candidate!)' 
    } 
} 

Plunker example