Angular-在构造函数中设置属性时无法解析所有参数

Question

我正在尝试学习Angular2，并且无法设法实现基本服务。 当我尝试在构造函数中设置我的brandsService时，出现一个错误，指出Error: Can't resolve all parameters for SelectListComponent: 。 像这样

constructor(public brandsService:BrandsService){}

这是我的代码...

零件

import {Component, OnInit} from '@angular/core';
import {BrandsService} from '../services/brands.service';


@Component({
    selector: 'select-list',
    template: `<h1>hello world</h1>`,
    styleUrls: [
        './css/app/form-elements.css'
    ],
    providers: [
        BrandsService
    ]
})

export class SelectListComponent implements OnInit {

    constructor(public brandsService:BrandsService){}

    ngOnInit(): void {}
}

服务

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

@Injectable()
export class BrandsService {
    brands = [
        {id: 1, name: "Brand One"}
    ];
}

这是我的app.module.ts代码

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';    

import { AppComponent } from './app.component';    
import {BrandsService} from "./services/brands.service";
import {SelectListComponent} from './filter-list/filter-list.component';

@NgModule({
    imports:      [ BrowserModule ],
    declarations: [
        AppComponent,
        SelectListComponent
    ],
    bootstrap: [
        AppComponent
    ],
    providers: [
        BrandsService
    ]
})

export class AppModule { }

Answer 1

请确保您包括服务providers内@NgModule在main.ts文件。 您可以这样导入：

import services from './app/common/services/BrandsService';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [...],
  providers: [BrandsService, ...],
  imports: [...]
})
export class AppModule{}

或从服务文件夹中的index.ts文件导入所有服务，如下所示，并确保将BrandsService导入到该index.ts文件：

主要

import services from './app/common/services';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [...],
  providers: [services, ...],
  imports: [...]
})
export class AppModule{}

/services/index.ts

import {BrandsService} from './brands.service';

export default [BrandsService];

export {BrandsService}

Answer 2

您不能在@Component元数据中使用用户providers 。 您必须设置providers并在模块中声明所有组件，如下所示：

@NgModule({
  imports     : [HttpModule],
  declarations : [SelectListComponent],
  providers : [BrandsService]
})
export class AppModule {
}

从您的组件元数据中删除providers: [BrandsService] 。