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 - 在構造函數中設置屬性時無法解析所有參數

回答

相關問題