从共享服务获取数据angular2

Question

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

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

nb：我已经提供了ngModule的服务。我想现在它已经足够共享了，并且可以从我的两个组件完全访问。我正在成功使用该服务并获得第一个组件的密钥。但不知道如何在第二个组件中获得它。胖箭头功能 令我困惑。我应该不能通过在组件中调用它来获取变量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和组件的更高级别nt 2.然后你的组件2会在服务中看到组件1对它做了什么。

例如：

（1）在服务声明属性keyForUpload

（2）设组件1类成功形象后更新keyForUpload上传

this.uploaderService.keyForUpload=123; 

（3）现在您的组件2可以访问keyForUpload

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

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