Question

我已经构建了一个用于处理我的http请求ApiService的服务，并且我添加了几个文件来很好地包装我的http调用，所以我可以处理它们（只为一个，它们都遵循相同的样式EmailApiService等，并在需要时将数据传回我的组件。

我遇到的问题是，在我使用路由器控制的一个组件ReportsComponent中，我收到了错误

angular2.js?1460130081845:23877 EXCEPTION: Error: Uncaught (in promise): No provider for EmailApiService! (ReportsComponent -> EmailApiService)

对EmailApiService方法的调用位于ReportsComponent

的构造函数中

当我向ToolbarComponent构造函数添加相同的调用时（我正在为报告执行此操作），它们完美地工作。

这让我相信，如果将提供者传递给通过路由器添加的子代，或者我正在接近它，那么就会出现问题。

app.component

import {ToolbarComponent} from './toolbar.component';
//pages
import {HomeComponent} from '../../home/components/home.component';
import {ReportsComponent} from '../..//reports/components/reports.component';
import {SignInComponent} from '../../signin/components/signin.component';
import {UserDetailsService} from '../../shared/services/user-details.service';
import {ApiService} from '../../shared/services/api.service';
import {EmailApiService} from '../../shared/services/email-api.service';
@Component({
  selector: 'app',
  viewProviders: [ApiService, EmailApiService, UserDetailsService],
  directives: [ROUTER_DIRECTIVES, ToolbarComponent]
})
@RouteConfig([
  { path: '/', name: 'Sign In', component: SignInComponent, useAsDefault: true },
  { path: '/home', name: 'Home', component: HomeComponent },
  { path: '/reports', name: 'Reports', component: ReportsComponent }
])

export class AppComponent {
  constructor() {}
}

app.html（致电<toolbar>而不是<router-outlet>（当我通过导航栏导航到报告页面时）

<div class="container-fluid">
  <toolbar></toolbar>      
  <router-outlet></router-outlet>
</div>

apiService

@Injectable()
export class ApiService {
  constructor(public http: Http,
              public userDetailService: UserDetailsService) {
  }

  request(type: RequestMethod, url: string, data: any, afterSuccess?: any) {
    ....
  }

  get(url: string, data: any, afterSuccess?: any) {
    ....
  }

  post(url: string, data: any, afterSuccess?: any) {
    ....
  }
}

emailapiService

@Injectable()
export class EmailApiService {

  token: string;
  service_provider_id: number;

  constructor(public apiService: ApiService,
              public userDetailService: UserDetailsService) {
    this.token = this.userDetailService.token;
    this.service_provider_id = this.apiService.service_provider_id;
  }

  emailExists() {
....
    return this.apiService.get('emails/email-address/exists');
  }


  emailSend()
....
    return this.apiService.post('emails/send');
  }
}

reportsComponent（不起作用，抛出缺少的提供者）

@Component({
  selector: 'reports',
  moduleId: module.id,
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.css'],
  directives: []
})
export class ReportsComponent {
  constructor (public emailApiService: EmailApiService,
               public userDetailsService: UserDetailsService) {
    this.emailApiService.emailExists('test@gmail.com');
    this.emailApiService.emailSend('test', 'test@gmail.com');
    console.log(this.userDetailsService.loggedIn);
  }
}

toolbarComponent（工作，调用成功）

@Component({
  selector: 'toolbar',
  moduleId: module.id,
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css'],
  directives: []
})
export class ToolbarComponent {
  constructor(public emailApiService: EmailApiService,
    public userDetailsService: UserDetailsService) {
    this.emailApiService.emailExists('test@gmail.com');
    this.emailApiService.emailSend('test', 'test@gmail.com');
    console.log(this.userDetailsService.loggedIn);
  }
}

我已经看过并阅读过的一件事是将apiService和emailApiService以及UserDetailService添加到我的引导程序中，但我觉得我不需要这样做而且我可能错过了它在工具栏上工作的东西。

来自我的main.ts的引导程序

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

提前感谢您抽出宝贵时间帮助我。

修改

我已尝试将应用组件中的viewProviders更改为providers，但我仍然遇到同样的问题。

我觉得通过bootstraps提供实际添加它们可能是正确的，因为它们将是通过应用程序访问并用于存储和共享数据的文件。

Answer 1

CREATE TABLE "DIM_UBICACION" (`

    [ID_DIM_UBICACION] [int] IDENTITY(1,1),
    [COUNTRY_ID] [int] ,
    [COUNTRY_NAME] [varchar](120),
    [CITY_ID] [int],
    [CITY_NAME] [varchar](120)
    CONSTRAINT [PK_DIM_UBICACION] PRIMARY KEY CLUSTERED 
    )
    (
    [ID_DIM_UBICACION] ASC
    )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
    ) ON [PRIMARY]

否则无法重现Plunker example

修改在评论中发现并讨论了解决方案。在进口中有一个额外的/

<div class="container-fluid> ^ missing closing " <toolbar></toolbar> <router-outlet></router-outlet> </div>

应该是

import {ReportsComponent} from '../..//reports/components/reports.component';`

无法在路由器插座儿童中找到提供商

1 个答案: