内部函数 如何使用 "this.http (Restful)"?
Inside function How do I use "this.http (Restful)"?
我创建了一个 HTTP 实用程序服务和一个消息服务。
在消息框中,征求用户的同意。当我同意时,我在使用 HTTP 实用程序服务时遇到了问题。
我不知道如何使用函数内部的 HTTP 实用程序服务。
请帮帮我。
[Message.service.ts]
FullScreenConfirm(title, content, fs, ff){
this.notificationService.smartMessageBox({
title : title,
content : content,
buttons : '[No][Yes]'
}, (ButtonPressed) => {
if (ButtonPressed == "Yes") {
fs(); //success Method
} else if(ButtonPressed == "No"){
ff(); //fail Method
}
});
}
我购买了 "SmartAdmin" 模板。
所以你可以使用"notificationService"。
[appManagement.component.ts]
appDelete(appName) {
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
function(){
this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
function(){
console.log("FAIL");
})
}
[结果]
"ERROR TypeError: Cannot read property 'http' of undefined"
首先你必须导入它 import { Http } from @angular/http
,在你的构造函数中声明它 private http : Http
然后你可以像这样在任何函数中使用它 this.http.post(...)
。
您应该查看文档以获取更多详细信息 https://angular.io/guide/http
经典 this
范围问题。对于问题中的代码,this
与其所在的函数隔离,因此无法访问您尝试访问的 this
对象。
要解决此问题,您需要将变量分配给 this
appDelete(appName) {
var self = this;
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
function(){
self.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
function(){
console.log("FAIL");
})
}
这里我给 this
分配了一个名为 "self" 的引用变量,这样我们就可以在我们的函数中访问它。
注意:您可以使用 ES6 的 arrow function
来解决这个问题
看起来像这样:
appDelete(appName) {
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
() => {
this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
(err) => {
console.log(err || "FAIL");
})
}
在构造函数中注入依赖项
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
@Injectable()
export class MyService{
params: URLSearchParams = new URLSearchParams();
constructor(
private http: Http
) { }
}
并将函数更改为绑定到 this
的 ES6 箭头函数
function () {
//code here
}
ES6 arrow function
() => {
//code here
}
我创建了一个 HTTP 实用程序服务和一个消息服务。
在消息框中,征求用户的同意。当我同意时,我在使用 HTTP 实用程序服务时遇到了问题。
我不知道如何使用函数内部的 HTTP 实用程序服务。
请帮帮我。
[Message.service.ts]
FullScreenConfirm(title, content, fs, ff){
this.notificationService.smartMessageBox({
title : title,
content : content,
buttons : '[No][Yes]'
}, (ButtonPressed) => {
if (ButtonPressed == "Yes") {
fs(); //success Method
} else if(ButtonPressed == "No"){
ff(); //fail Method
}
});
}
我购买了 "SmartAdmin" 模板。
所以你可以使用"notificationService"。
[appManagement.component.ts]
appDelete(appName) {
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
function(){
this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
function(){
console.log("FAIL");
})
}
[结果]
"ERROR TypeError: Cannot read property 'http' of undefined"
首先你必须导入它 import { Http } from @angular/http
,在你的构造函数中声明它 private http : Http
然后你可以像这样在任何函数中使用它 this.http.post(...)
。
您应该查看文档以获取更多详细信息 https://angular.io/guide/http
经典 this
范围问题。对于问题中的代码,this
与其所在的函数隔离,因此无法访问您尝试访问的 this
对象。
要解决此问题,您需要将变量分配给 this
appDelete(appName) {
var self = this;
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
function(){
self.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
function(){
console.log("FAIL");
})
}
这里我给 this
分配了一个名为 "self" 的引用变量,这样我们就可以在我们的函数中访问它。
注意:您可以使用 ES6 的 arrow function
来解决这个问题看起来像这样:
appDelete(appName) {
this.messageBoxService.FullScreenConfirm("DELETE", "Are you sure you want to delete?",
() => {
this.http.delete(this.http.serverURL + "/delete/" + this.appList.id)
.then((res) => {
console.log("SUCCESS");
});
},
(err) => {
console.log(err || "FAIL");
})
}
在构造函数中注入依赖项
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
@Injectable()
export class MyService{
params: URLSearchParams = new URLSearchParams();
constructor(
private http: Http
) { }
}
并将函数更改为绑定到 this
function () {
//code here
}
ES6 arrow function
() => {
//code here
}