dependency-injection - Angular 2 - 没有服务提供者

Question

我一直在尝试解决 Angular 2 的一个奇怪问题，它没有检测到我的提供者声明，但没有任何效果。我什至无法在 plunkr 中复制它。

我正在使用带有路由器 3.0 alpha.8 的 angular 2 rc 3。

错误信息是:ORIGINAL EXCEPTION: No provider for TestService!

app.routes.ts:

import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './app/home/home.component';
import { LogInComponent } from './app/log-in/log-in.component';
import { SignUpComponent } from './app/sign-up/sign-up.component';

export const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'log-in', component: LogInComponent },
  { path: 'sign-up', component: SignUpComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { enableProdMode } from "@angular/core";

import { AppComponent } from './app/app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

// enableProdMode();

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
])
.catch(error => console.log(error));

应用程序/app.component.ts:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from './shared/test.service';

@Component({
  selector: 'my-app',
  template: `
    <div id="menu">
      <a [routerLink]="['/sign-up']"><button>Sign Up</button></a>
    </div>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [TestService]
})
export class AppComponent {

  constructor() { }

}

app/sign-up/sign-up.component.ts:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from '../shared/test.service';

@Component({
  selector: 'sign-up',
  template: `<h1>Sign up!</h1>`,
  directives: [ROUTER_DIRECTIVES]
})
export class SignUpComponent {
  constructor(private testService: TestService) {
    this.testService.test('works?');
  }


}

app/shared/test.service.ts:

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

@Injectable()
export class TestService {

  constructor() { }

  test(message: string) {
    console.log(message);
  }

}

因此，我在基础组件 (app.component.ts) 中提供了测试服务，因为我希望我的所有组件都访问同一个实例。但是，当我导航到注册时，出现了 no provider for testservice 错误。如果我在注册组件中提供 TestService，那么这将起作用:

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from '../shared/test.service';

@Component({
  selector: 'sign-up',
  template: `<h1>Sign up!</h1>`,
  directives: [ROUTER_DIRECTIVES],
  providers: [TestService]
})
export class SignUpComponent implements OnInit {
  constructor(private testService: TestService) { }

  ngOnInit() { }

}

但是，我需要在整个应用程序中访问同一个实例，那么我如何才能在主要组件级别注入(inject)它？

我什至尝试用相同版本的所有内容复制这个由 plunkr 提供的应用级服务，但它似乎并没有给我同样的错误...

http://plnkr.co/edit/5bpeHs72NrlyUITCAJim?p=preview

Answer 1

在 app 级别注入(inject)一些东西是在 bootstrap 中完成的:

main.ts:

import { TestService } from '../shared/test.service';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS, TestService
])