Passing a value (status code/response header from api) from a service to a component and redirect by routing in Angular2

Question

I have a service that's responsible for uploading a file to a REST server. The file is being uploaded successfully. What I want to do is to redirect my uploading component to another component based on a success status code (i.e: if I get 200, only then redirect), with a value from the response header (key: 1234). This value should be accessible from this new new component as I want to insert it as a hidden form input value. What do I need to do for this?

Here is my service that's responsible for uploading file:

 export class UploadedFile {
    id: string;
    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); // right now, here I can print my status code successfully
        console.log(response.toString()); // here I can print my response successfully
    }
}

export class SomeOtherClass{}

Here is my component:

import {Component} from '@angular/core';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/pluck';

import {Router} from '@angular/router';

@Component({
    templateUrl: 'ocr/templates/image-upload.html'
})

export class OCRComponent {

    constructor(private router: Router){}


    options: Object = {
        url: 'http://someip:port/upload'
    };
    sizeLimit = 2000000;

    handleUpload(data): void {
        this.router.navigate(['ocr-form']);
            }

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

}

Answer 1

What I will probably quickly do, if I understand the question right, is:

if(status === 200){
    this.service.statusCache = response.Key
    this.router.navigate(['some-route']);
}

where the statusCache is some behaviourSubject.

After you will only have to do something like this on the other component

this.service.statusCache$.subscribe((key: string) => this.hiddenValue = key);

You define you behaviourSubject as:

statusCache$ = new BehaviorSubject(null);
set statusCache(value: any) { this.statusCache$.next(value); }

Hope that helps!