Question

我是Angular 2的新手。我想做一个非常基本的服务，所以我喜欢这个：

apitest.service.ts：

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

@Injectable()
export class ApiTest {
    log(msg:string){
        console.log(msg);
    }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';

import { AppComponent }   from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

import { DashboardModule } from './dashboard/dashboard.module';
import { SidebarModule } from './sidebar/sidebar.module';
import { FooterModule } from './shared/footer/footer.module';
import { NavbarModule} from './shared/navbar/navbar.module';

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import {ApiTest} from './shared/apiTest/apitest.service';

@NgModule({
    imports:      [
        BrowserModule,
        DashboardModule,
        SidebarModule,
        NavbarModule,
        FooterModule,
        HttpModule,
        RouterModule.forRoot([])
    ],
    declarations: [ AppComponent, DashboardComponent ],
    providers: [
        {
            provide: LocationStrategy, 
            useClass: HashLocationStrategy
        }, ApiTest],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

calendario.component.ts：

 import {ApiTest} from './../../shared/ApiTest/apitest.service';

@Component({
    moduleId: module.id,
    selector: 'calendario',
    templateUrl: 'calendario.component.html'
})
    export class CalendarioComponent{
         constructor( private apitest:ApiTest) {}
        obtenerDatos() {
            this.apitest.log("Hola desde servicio");
        }
    }

我收到了这个错误： 例外：未捕获（承诺）：错误：没有ApiTest的提供者

如果我将组件装饰器更改为：

@Component({
    moduleId: module.id,
    selector: 'calendario',
    templateUrl: 'calendario.component.html',
    providers: [ApiTest]
})

有效。

但是......我知道我无法在@NgModule上声明我的服务，这个服务可以在我想要的任何组件上使用！我的答案基于the official Angular 2 Docs

我做错了什么？谢谢！

[更新1]

calendarioComponent位于另一个模块dashboardModule。

dashboard.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthModule } from '../auth.module';
import {ApiTest} from './../shared/apiTest/apitest.service';
import { MODULE_COMPONENTS, MODULE_ROUTES } from './dashboard.routes';

@NgModule({
    imports: [
        RouterModule.forChild(MODULE_ROUTES),
        AuthModule
    ],
    declarations: [ MODULE_COMPONENTS ],
    providers: [ApiTest]
})

export class DashboardModule{

}

正如您所看到的，我在这里添加了服务导入和提供程序，但仍然给我同样的错误。

Answer 1

所以......我找到了解决方案。但这个解决方案很奇怪。我将我的服务文件放在模块旁边的同一文件夹中，我注入了我的服务，现在可以工作了。

在我的服务之前：

//calendario.component.ts
import {ApiTest} from './../../shared/ApiTest/apitest.service';

现在：

import {UserService} from '../apitest.service';

在我的模块之前：

import {ApiTest} from './../shared/apiTest/apitest.service';

现在：

import {UserService} from './apitest.service';

也许这会有助于其他事情。

但我想知道为什么???

Angular 2中的提供者服务出错

1 个答案: