サービスからAngula2のコンポーネントに値を渡そうとしています。取得：「未処理プロミス拒否：すべてのパラメータを解決できません。」

Question

サービスから特定の値を自分のコンポーネントに渡そうとしています。しかし、私は私のコンソールでこのエラーを取得しています：ここで

Unhandled Promise rejection: Can't resolve all parameters for Help: (?). ; Zone: ; Task: Promise.then ; Value: Error: Can't resolve all parameters for Help: (?). at CompileMetadataResolver._getDependenciesMetadata

は、私は私のサービスに持っているものである：ここでは

export class Help{ 

    good: number; 

    constructor (private _uploadedFile: UploadedFile){} 

    getGood(){ 
     this.good = this._uploadedFile.status; 
     return this.good; 
    } 

} 

は私のコンポーネントである：ここでは

@Component({ 
    templateUrl: 'ocr/templates/image-upload.html', 
    providers: [Help] 

}) 


export class OCRComponent { 

    statusFromServer: number; 

    constructor(private router: Router, @Inject(Help) private _help: Help){} 

    options: Object = { 
     url: 'http://10.10.10.15:8081/upload' 
    }; 
    sizeLimit = 2000000; 

    handleUpload(): void { 

     this.statusFromServer = this._help.getGood(); 
     console.log('this.statusFromServer'); 

      } 

    beforeUpload(uploadingFile): void { 
     if (uploadingFile.size > this.sizeLimit) { 
      uploadingFile.setAbort(); 
      alert('File is too large'); 
     } 
    } 

} 

はにUploadedFileですサービスからのクラス：

@Injectable() 
export class UploadedFile { 
    id: string; 
    public status: number; 
    statusText: string; 
    progress: Object; 
    originalName: string; 
    size: number; 
    response: string; 
    done: boolean; 
    error: boolean; 
    abort: boolean; 
    startTime: number; 
    endTime: number; 
    speedAverage: number; 
    speedAverageHumanized: string; 

    constructor(id: string, originalName: string, size: number) { 
     this.id = id; 
     this.originalName = originalName; 
     this.size = size; 
     this.progress = { 
      loaded: 0, 
      total: 0, 
      percent: 0, 
      speed: 0, 
      speedHumanized: null 
     }; 
     this.done = false; 
     this.error = false; 
     this.abort = false; 
     this.startTime = new Date().getTime(); 
     this.endTime = 0; 
     this.speedAverage = 0; 
     this.speedAverageHumanized = null; 
    } 

    setProgres(progress: Object): void { 
     this.progress = progress; 
    } 

    setError(): void { 
     this.error = true; 
     this.done = true; 
    } 

    setAbort(): void { 
     this.abort = true; 
     this.done = true; 
    } 

    onFinished(status: number, statusText: string, response: string): void { 
     this.endTime = new Date().getTime(); 
     this.speedAverage = this.size/(this.endTime - this.startTime) * 1000; 
     this.speedAverage = parseInt(<any>this.speedAverage, 10); 
     this.speedAverageHumanized = humanizeBytes(this.speedAverage); 
     this.status = status; 
     this.statusText = statusText; 
     this.response = response; 
     this.done = true; 
     // console.log(status); 
     // console.log(response.toString()); 

    } 


} 

私の依存関係注入には何が問題なのですか？

Answer 1

これはあなたのコンポーネントのプロバイダとして、またはモジュールのプロバイダとして追加したい場合は、UploadFileサービスの問題であるようです。

あなたのモジュールにUploadFileサービスを追加すると、そのサービスはあなたがそれを注入したすべての場所で同じインスタンスになります。

また、コンポーネントにUploadFileサービスを追加すると、そのサービスは新しいインスタンスになるため、別のコンポーネントから値を取得しようとすると値が空になります。 UploadFileのポスト後

：あなたはDIの詳細については、何かが、注射

https://angular.io/docs/ts/latest/guide/dependency-injection.html

@Component({ 
    templateUrl: 'ocr/templates/image-upload.html', 
    providers: [Help, UploadFile] 

}) 

export class OCRComponent { 
    // Removed the content to focus only on the @Component decorator. 
} 

編集に行くようにしたいとき

@Injectable()デコレータを追加することを忘れないでください私たちはそれが単なるクラスであることを知りました。問題は、角度がそのコンストラクタを解決できないということでした。

Answer 2

@Injectable() // <<= 
export class Help{ 

constructor(private router: Router, Help private _help: Help){} 

このコンストラクタは、注射のために動作しません。

constructor(id: string, originalName: string, size: number) { 

stringを注入することができません。

あなたは@camaron

によって説明が好き someProviderKeyXニーズ登録プロバイダ のキーであるか、どこかに提供する必要があるパラメータ

とHelpを削除し、UploadFileする

constructor(
     @Inject('someProviderKey1') id: string, 
     @Inject('someProviderKey2') originalName: string,    
     @Inject('someProviderKey3') size: number) { 

を使用しますか