尝试将值从服务传递到 Angula2 中的组件。获得："Unhandled Promise rejection: Can't resolve all parameters."

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');
        }
    }

}

这是来自服务的上传文件class：

@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 服务，该服务将是一个新实例，因此如果您尝试从另一个组件获取某些值，则某些值将为空。

当你想做一些东西时记得添加 @Injectable() 装饰器 injectable

有关 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.
}

编辑：

在 UploadFile 的 post 之后，我们看到它只是一个 class，问题是 angular 无法解析该构造函数。

Answer 2

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

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

此构造函数不适用于注射剂：

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

string无法注入。

要么你用

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

其中 someProviderKeyX 需要是注册提供商的密钥或删除参数

and Help and UploadFile 需要像@camaron

解释的那样在某处提供

尝试将值从服务传递到 Angula2 中的组件。获得："Unhandled Promise rejection: Can't resolve all parameters."

Trying to pass a value from a service to a component in Angula2. Getting: "Unhandled Promise rejection: Can't resolve all parameters."

angularjs

angular

angular2-services