Angular2 如何使用 Javascript XMLHttpRequest 重定向到另一个组件
Angular2 How to redirect to another component using Javascript XMLHttpRequest?
我正在尝试使用 XMLHttpRequest 发出 POST 请求,如果 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';
但它不起作用。
您需要
使用 =>
而不是function
否则this.
不再指向您的组件类
xhr.onreadystatechange=function(){ ... }
应该是
xhr.onreadystatechange => () { ... }
有关更多详细信息,请参阅 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions。
相关文章:
- 如何在react js中将值从一个组件发送到另一个组件
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- Angular2将组件方法导入到另一个组件中
- 如何在另一个组件中获取指令/组件实例
- 无法将react组件作为属性传递给另一个组件
- 在React中将方法从一个组件移动到另一个组件,并且仍然可以在原始组件中使用
- 如何从一个组件访问另一个组件的状态
- Vue.js从另一个组件获取数据
- Angular 2:在另一个组件上定义一个路由器,而不是引导的
- Angular2 如何使用 Javascript XMLHttpRequest 重定向到另一个组件
- (反应)如何在另一个组件中包含多个组件
- Vue.js 在另一个组件的一个组件中使用变量
- 在 React 中渲染一个组件中的另一个组件
- Vue.js 从另一个组件调用方法
- 反应如何更新另一个组件的状态
- 根据 Angular 2 中另一个组件中单击的内容更新一个组件中的数据
- 如何在react中调用另一个组件中的一个组件
- 淘汰赛“;web组件”;未加载到另一个组件内(在SPA中)
- ReactJS:将我自己的道具添加到另一个组件中
- React-将一个变量传递给另一个组件