Angular2 Как перенаправить на другой компонент с помощью Javascript XMLHttpRequest?

Question

Я пытаюсь сделать запрос POST с использованием XMLHttpRequest, и я хочу перенаправить на другой компонент, если запрос xhr был успешным.

вот мой код:

import {Component, Inject, Injectable, OnInit} from 'angular2/core' 
import {FORM_DIRECTIVES, NgForm, ControlGroup, FormBuilder, Control, CORE_DIRECTIVES, NgIf} from 'angular2/common' 
import {HTTP_PROVIDERS, Http} from 'angular2/http' 
import {ROUTER_DIRECTIVES, Router} from 'angular2/router' 

export class StudentAdmissionForm{ 
    constructor (public router: Router){ 
    } 

    makeFileRequest(data){ 

      var url = this.base_path_Service.base_path_student()+"student/"; 

      return new Promise((resolve, reject) => { 

       var formData: any = new FormData(); 
       var xhr = new XMLHttpRequest(); 

       formData.append("image", this.studentDetails.image);   
       formData.append("first_name",this.studentDetails.first_name); 
       formData.append("middle_name",this.studentDetails.middle_name); 

       console.log(formData); 

       xhr.open("POST", url, true); 
       xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('id_token')); 
       xhr.send(formData); 
       xhr.onreadystatechange=function() 
        { 
         console.log("status " + xhr.status); 
         if(xhr.readyState === XMLHttpRequest.DONE && xhr.status == 201){ 
          toastr.success('Created !'); 
          var res = JSON.parse(xhr.responseText); 
          this.router.navigate(['../PreviousDetailsCmp', {first_name:res.student_id, student_id:res.id}]); 
         } 

        } 
    } 
} 

Приведенный выше код успешно выполнен. Но мой вопрос: что я могу сделать в angular2 или javascript для перенаправления на цель.

Я использовал router.navigate но хром показывает следующие ошибки:

EXCEPTION: TypeError: Cannot read property 'navigate' of undefined 

Я также пытался window.location = '/sidenav/PreviousDetailsCmp'; но не работает.

Answer 1

Вы должны использовать => вместо function иначе this. не указывает на ваш компонент класса больше

xhr.onreadystatechange=function(){ ... } 

должен быть

xhr.onreadystatechange =>() { ... } 

См https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions для более подробной информации.