Question

我试图从特定的类中调用服务，但由于某种原因它无法被调用，即使我能够在其他类中使用它。我正在使用@Input。我不知道这是否是导致问题的原因。

代码：

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

import { Category } from './../Category';
import { CertService } from './../../shared/Service/cert.service';

@Component({
  selector: 'app-cert-item',
  templateUrl: './cert-item.component.html'
})
export class CertItemComponent implements OnInit {

  @Input() category: Category;
  @Input() categoryId: number;
  constructor(
    private certService: CertService //Console error "No provider for CertService!"
  ) { }

  ngOnInit() {
    console.log(this.certService.getCategories());
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header.component';
import { DropdownDirective } from './dropdown.directive';
import { CertsComponent } from './certs/certs.component';
import { CertItemComponent } from './certs/cert-category/cert-item.component';

import { CertService } from './shared/service/cert.service';
import { HttpService } from './shared/Service/http.service';

import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DropdownDirective,
    CertsComponent,
    CertItemComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    ReactiveFormsModule,
    NgbModule.forRoot()
  ],
  providers: [
    CertService, 
    HttpService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

服务类我试图打电话（样本）

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";
import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

@Injectable()
export class CertService {

  constructor(private http: Http) { }

  getCategories() {
    return this.http.get('api/categories')
   .map((response: Response) => response.json());
  }

}

我也无法使用

获取当前路线

this.subscription = this.route.params.subscribe(
      (params) => {...

...});

同样，上面的代码在其他类中运行良好，但在此类中不行。

Answer 1

如果提供商提供了错误，则会发生这种情况。并且不太可能存在其他原因。

在一个地方它是CertService，在另一个地方它是window.CertService1。案件很重要。这取决于环境在构建过程中这些模块会发生什么，但这可能会导致错误，例如：它们可能会重复并引用不同的对象。

要快速调试此问题，window.CertService2可以从namespace MyQuotesApp { public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { loggerFactory.AddConsole(); if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseDefaultFiles(); app.UseStaticFiles(); //app.Run(async (context) => //{ // await context.Response.WriteAsync("Hello World!"); //}); app.UseMvc(); } } }和id两个文件公开，并在控制台中进行比较，如果两者都已定义且相等。

Answer 2

可以通过在应用中使用同名的其他服务来触发完全相同的错误消息（“没有SomeService的提供商”）。所以看起来你正确地将 SomeService＃1 包含在你的模块中，添加到providers部分，但它仍然会引发错误。直到我意识到在我的一个组件中导入了 SomeService＃2 时，我才感到困惑。

Answer 3

就我而言，我将服务导入为

import {MyService} from '../services/my.service'

在一个地方，

import {MyService} from '../services/index'

在另一个地方，而index.ts包含同一文件夹中服务的所有导出语句。

在统一到第二种导入形式后，问题就消失了。

Angular 2 - 没有提供商错误（即使我已经添加了提供商）

3 个答案: