angular2 Нет поставщика услуг NavigationService! (MenuComponent -> NavigationService)

Question

Я пытаюсь создать угловое (бета7) приложение. На вершине должен быть 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'
})