从共享服务 angular2 获取数据

Question

我想要实现的是：使用uploaderService从第一个组件上传图片。成功上传后，我的服务器将密钥作为 HTTP 发送 我可以从第一个组件访问/打印的响应。成功上传后，第一个组件重定向到第二个组件。现在， 我想在第二个组件中访问/打印/使用服务中的键值（第一个组件已经可以访问）。

我尝试的是：使服务成为可注入的共享服务。因此，如果我导入服务并使用构造函数启动它，它应该具有相同的 第一个组件正在使用的服务的实例。所以我在第一个组件的成功回调中获得的值应该可以被我的第二个组件访问 组件以某种方式。这是我的代码。

nb：我已经为 ngModule 提供了服务。我想它现在已经足够共享，并且可以从我的两个组件完全访问。我成功地使用了该服务并获得了第一个组件中的密钥。但不确定如何在第二个组件中获取它。粗箭头函数 让我很困惑。我不应该能够通过在组件中调用它来从服务中的函数 A 获取变量 x 的值，例如：

someassignablevariable = this.service.x;

我的第一个组件：

import {Component, Output} from '@angular/core';
import { Uploader } from '../services/uploader';
import { MyUploadItem } from '../services/my-upload-item';
import {Router} from "@angular/router";

@Component({
    template: `
//tempate codes
    `
})

export class FirstComponent {
    constructor(public uploaderService: Uploader, private _router: Router) { }

    public pushKey: String;

    submit() {
        let uploadFile = (<HTMLInputElement>window.document.getElementById('sampleFile')).files[0];


        let myUploadItem = new MyUploadItem(uploadFile);

        this.uploaderService.onSuccessUpload = (item, response, status, headers) => {
            // success callback
            this.pushKey = response.toString();
            console.log('Push Key:'+ response.toString())
            this._router.navigate(['second-component']);
        };
        this.uploaderService.onErrorUpload = (item, response, status, headers) => {
            // error callback

            console.log(response.toString());
        };
        this.uploaderService.onCompleteUpload = (item, response, status, headers) => {
            // complete callback, called regardless of success or failure
            console.log(response.toString());
        };
        this.uploaderService.onProgressUpload = (item, percentComplete) => {
            // progress callback
            console.log(percentComplete);
        };
        this.uploaderService.upload(myUploadItem);
    }
}

我的第二个组件：

import {Component, OnInit} from '@angular/core';
import {Uploader} from "../services/uploader";

@Component({
    template: `
    ....
    <p>Push Key: {{pushKey}}</p>               
    ....
    `
})


export class SecondComponent{

    constructor(public uploaderService: Uploader) { }

    pushKey: String;

    ngOnInit(){this.getKey()}

        getKey() {

            this.uploaderService.onSuccessUpload = (item, response, status, headers) => {
                // success callback
                this.pushKey = response.toString();
                console.log('Push Key:' + this.pushKey);
            };
            return this.pushKey;
        }
}

我的服务：

import { Injectable }  from '@angular/core';
import { UploadItem }  from './upload-item';

@Injectable()
export class Uploader {
    onProgressUpload = (item: UploadItem, progress: number) => {};
    onCompleteUpload = (item: UploadItem, response: any, status: any, headers: any) => {};
    onSuccessUpload = (item: UploadItem, response: any, status: any, headers: any) => {};
    onErrorUpload = (item: UploadItem, response: any, status: any, headers: any) => {};
    onCancelUpload = (item: UploadItem, response: any, status: any, headers: any) => {};

    constructor() { }

    upload(item: UploadItem) {
        if(this.isHTML5()) {
            this.xhrTransport(item);
        } else {
            this.onErrorUpload(item, 'Unsupported browser.', null, null);
        }
    }

    private isHTML5(): boolean {
        return !!((<any>window).File && (<any>window).FormData);
    }

    private xhrTransport(item: UploadItem) {
        let xhr  = new (<any>window).XMLHttpRequest();
        let form = new (<any>window).FormData();

        this.forEach(item.formData, (key: string, value: any) => {
            form.append(key, value);
        });

        form.append(item.alias, item.file, item.file.name);


        xhr.upload.onprogress = (event: any) => {
            let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
            this.onProgressUpload(item, progress);
        };

        xhr.onload = () => {
            let headers = this.parseHeaders(xhr.getAllResponseHeaders());
            let response = this.parseResponse(headers['Content-Type'], xhr.response);
            if(this.isSuccessStatus(xhr.status)) {
                this.onSuccessUpload(item, response, xhr.status, headers);
            } else {
                this.onErrorUpload(item, response, xhr.status, headers);
            }
            this.onCompleteUpload(item, response, xhr.status, headers);
        };

        xhr.onerror = () => {
            let headers = this.parseHeaders(xhr.getAllResponseHeaders());
            let response = this.parseResponse(headers['Content-Type'], xhr.response);
            this.onErrorUpload(item, response, xhr.status, headers);
            this.onCompleteUpload(item, response, xhr.status, headers);
        };

        xhr.onabort = () => {
            let headers = this.parseHeaders(xhr.getAllResponseHeaders());
            let response = this.parseResponse(headers['Content-Type'], xhr.response);
            this.onCancelUpload(item, response, xhr.status, headers);
            this.onCompleteUpload(item, response, xhr.status, headers);
        };

        xhr.open(item.method, item.url, true);

        xhr.withCredentials = item.withCredentials;

        this.forEach(item.headers, (name: string, value: string) => {
            xhr.setRequestHeader(name, value);
        });

        xhr.send(form);
    }

    private isSuccessStatus(status: number) {
        return (status >= 200 && status < 300) || status === 304;
    }

    private forEach(obj: any, callback: any) {
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                callback(i, obj[i]);
            }
        }
    }

    private parseHeaders(headers: string) {
        let dict = {};
        let lines = headers.split('\n');
        for (let i = 0; i < lines.length; i++) {
            let entry = lines[i].split(': ');
            if(entry.length > 1) {
                dict[entry[0]] = entry[1];
            }
        }
        return dict;
    }

    private parseResponse(contentType: string, response: string) {
        let parsed = response;
        if(contentType && contentType.indexOf('application/json') === 0) {
            try {
                parsed = JSON.parse(response);
            } catch(e) {
            }
        }
        return parsed;
    }

}

Answer 1

如果您在更高级别向组件 1 和组件 2 提供服务，您的服务将是单例的。然后您的组件 2 将在服务中查看组件 1 对其执行的操作。

例如：

(1) 在你的服务中声明一个属性keyForUpload

(2) 让组件1类在图片上传成功后更新keyForUpload

this.uploaderService.keyForUpload=123;

(3) 现在你的组件 2 可以访问keyForUpload

keyForUpload = this.uploaderService.keyForUpload // the value will be 123

这是可能的，因为您的两个组件都有一个服务实例。