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

我在学习Angular2，无法实现基本服务。当我尝试在构造函数中设置我的brandsService时，出现一个错误，说Error: Can't resolve all parameters for SelectListComponent:。像这样..Angular - 在构造函数中设置属性时无法解析所有参数

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 { }

来源

2016-09-30 Ben Gordon

显示你的'@NMModule（）'代码。 – lbrahim

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

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

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

或者从这样你的服务文件夹内的index.ts文件导入的所有服务，并确保您导入BrandsService到index.ts文件：

为主。 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}

来源

2016-09-30 11:45:36 jhhoff02

我有我的@ngModule在app.module.ts然后导入到main.ts.将它添加到app.module.ts中的提供程序时，它不能解决错误。 –

你不能用户providers的@Component元数据。你必须设置providers并宣布你的模块中的所有compoenent如下：

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

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

来源

2016-09-30 11:47:21 ranakrunal9

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

回答

相关问题