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' 
})