コンポーネントに注入できませんか？

Question

パラメータなしのコンストラクタの作品が、私は何を注入しようとすると、ページがのランタイムエラーを返します。

は

がAppComponentのためのすべてのパラメータを解決できません：

任意のアイデア何の問題を（？）かもしれない？ここでは、コードです：

app.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { AngularFireModule } from 'angularfire2'; 
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'; 
import { environment } from '../environments/environment'; 
import { MyService } from './my.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AngularFireDatabaseModule, 
    AngularFireModule.initializeApp(environment.firebase) 
    ], 
    //providers:[], 
    providers: [MyService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts：

import { Component, Inject, Injectable, HostListener } from '@angular/core'; 
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 
import { VendingMachineService } from './vending-machine.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent 
{ 

/* 
    constructor() 
    { 
    } 
*/ 

    constructor(ms)   
    { 
     var x = vms; 
    } 
} 

my.service.ts：

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

@Injectable() 
export class MyService { 

    constructor() { } 

    public test(){ } 
} 

Answer 1

書き換え

app.component.ts: 

import { Component } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { VendingMachineService } from './vending-machine.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 

//please check vendingMachineService, this is not the name of the service you provided in code 
    constructor(private vendingMachineService: VendingMachineService){} 

/* 
    constructor(ms)  what is ms????? remove 
    { 
     var x = vms; 
    } 
*/ 
} 

なぜあなたはすでにあなたのアプリケーションモジュールにインポートされたモジュールをインポートするのでしょうか？あなたは、私はそうは思わないそれをやってみたかった、あなたは別のモジュールに

を宣言する必要があると思いますそして、あなたはおそらくmy-service.service.tsにあなたのサービスの名前を変更を検討したい、あなたが注入したい場合は

Answer 2

良く見える場合MyServiceをコンポーネントに追加すると、コンストラクタは次のようになります。

import { Component, Inject, Injectable, HostListener } from '@angular/core'; 
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 
import { VendingMachineService } from './vending-machine.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 


    // CLASS as type is required for Angular to match to your service 
    // otherwise angular doesn't know what to inject 
    // Also I have added the access modifier private 
    // which creates an field so you can access via this.myservice 
    constructor(private myService: MyService){ 
    } 

    // Example usage in a method: 
    someMethod(){ 
     this.service.doSth(); 
    } 
}