angular2沒有NavigationService的提供者！ （MenuComponent - > NavigationService）

Question

我正在嘗試創建一個角度（beta7）應用程序。在頂部應該有一個MenuComponent，它使用NavigationService導航到我的應用程序的不同部分。我想NavigationService是單身人士，因此我用bootstrap(...)實例化它。我知道你也可以在@Component()中添加提供者，但據我所知，這意味着這些提供者不是單身人士，而是每個實例創建。

不過，我發現了以下異常：

無提供的NavigationService！ （MenuComponent的 - > 的NavigationService）

這裏是我的代碼：

boot.ts

import {bootstrap} from 'angular2/platform/browser' 
import {provide} from 'angular2/core' 
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router' 
import {HubService} from './services/HubService'; 
import {ConfigService} from './services/ConfigService'; 
import {App} from './app'; 
import {NavigationService} from './services/NavigationService'; 

var bootstrap_application = function() { 
    var providers = [ 
     ROUTER_PROVIDERS, 
     NavigationService, 
     HubService, 
     ConfigService, 
     provide(LocationStrategy, { useClass: HashLocationStrategy })]; 
    bootstrap(App, providers); 
}; 

bootstrap_application(); 

app.ts

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router' 
import {MenuComponent} from './components/menu/menu'; 
import {HomeComponent} from './components/home/home'; 
import {RoomComponent} from './components/room/room'; 

@Component({ 
    selector: 'hc', 
    templateUrl: 'app/app.html', 
    directives: [ROUTER_DIRECTIVES, MenuComponent] 
}) 
@RouteConfig([ 
    { path: "/", name: "Home", component: HomeComponent, useAsDefault: true }, 
    { path: "/room/:name", name: "Room", component: RoomComponent } 
]) 
export class App { 
} 

app.html

<hc-menu>Loading menu...</hc-menu> 
<div class="container-fluid"> 
    <router-outlet></router-outlet> 
</div> 

menu.ts

import {Component} from 'angular2/core'; 
import {Room, ConfigService} from '../../Services/ConfigService'; 
import {NavigationService} from '../../Services/NavigationService'; 

@Component({ 
    selector: 'hc-menu', 
    templateUrl: 'app/components/menu/menu.html' 
}) 
export class MenuComponent { 
    Rooms: Room[]; 
    IsOpen: boolean; 

    constructor(private navigationService: NavigationService, private configService: ConfigService) { 
     this.Rooms = configService.GetRooms(); 
     this.IsOpen = false; 
    } 

    toggleOpen() { 
     this.IsOpen = !this.IsOpen; 
    } 

    navigateTo(room: Room) { 
     this.navigationService.navigateToRoom(room); 
    } 
} 

NavigationService.ts

import {Injectable} from 'angular2/core'; 
import {Router} from 'angular2/router'; 
import {Room} from './ConfigService' 

@Injectable() 
export class NavigationService { 
    router: Router; 

    constructor(router: Router) { 
     this.router = router; 
    } 

    navigateToRoom(room: Room) { 
     this.router.navigate(['Room', { name: room.Name }]); 
    } 
} 

Answer 1

在您的MenuComponent的類中添加提供程序：的NavigationService]作爲@Component的屬性。

@Component({ 
    selector: 'hc-menu', 
    providers:[NavigationService], 
    templateUrl: 'app/components/menu/menu.html' 
})