角度 - コンストラクタでプロパティを設定するときにすべてのパラメータを解決できません

Question

私はAngular2を学習しようとしており、基本サービスを実装することはできません。私はError: Can't resolve all parameters for SelectListComponent:というエラーが発生し、すぐに私のブランドサービスをコンストラクタに設定しようとします。 ..だからここ

constructor(public brandsService:BrandsService){} 

が私のコードであると同じように...ここで

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

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

コンポーネント

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

サービスは、私のapp.moduleです。 tコード

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

はあなたmain.tsファイルに@NgModule内providersでのサービスを含めていることを確認します。

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

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

するか、このようなあなたのサービスのフォルダ内index.tsファイルからすべてのサービスをインポートし、そしてあなたがそのindex.tsファイルにBrandsServiceをインポートしてください：あなたはこのようにそれをインポートすることができ

メイン。 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

することはできませんユーザーprovidersの@Componentメタデータ。あなたはprovidersを設定し、以下のように自分のモジュール内のすべてのあなたのcompoenentを宣言する必要があります。

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

コンポーネントのメタデータからproviders: [BrandsService]を削除します。