Angular2 Javascript XMLHttpRequest kullanarak başka bir bileşene nasıl yönlendirilir?

Question

XMLHttpRequest kullanarak bir POST isteği yapmaya çalışıyorum ve xhr isteği başarılı olursa başka bir bileşene yönlendirmek istiyorum. Yukarıdaki kod başarıyla yürütüldü

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}]); 
         } 

        } 
    } 
} 

:

burada benim kodudur. Ama sorum şu ki, hedefe yönlendirmek için angular2 veya javascript'te ne yapabilirim.

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

Ben de window.location = '/sidenav/PreviousDetailsCmp'; çalıştı ama onun çalışmıyor:

ben hata aşağıdaki router.navigate ancak krom gösterileri kullandı.

Answer 1

Sen

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

fazla ayrıntı için https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions Bkz olmalıdır aksi this. artık

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

sizin bileşen sınıfına işaret etmez => yerine function kullanımı gerekir.