我有一个组件在“响应”中获得成功的HTTP响应,然后导航到另一个组件。我在'pushKey'的第一个组件中分配了值。现在我希望可以从第二个组件访问'pushKey',其中我有一个表单,我想将'pushKey'的值作为隐藏输入传递。我该怎么做?
这是我的第一个组成部分:
@Component({
template:'
...
<input type="file" id="sampleFile">
<button (click)="submit()">Submit</button>
...
'
})
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']);
};
}
}
在我的第二部分:
@Component({
template:'
...
<input type="hidden" name="pushKey" value="pushKey">
...
'
})
export class SecondComponent{
//what should I do here to get the value of pushKey from the first component?
}
这是我的服务:
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);
console.log(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;
}
}