如何在 Angular 4 中从 chrome.runtime.sendMessage 获取回调?
Posted
技术标签:
【中文标题】如何在 Angular 4 中从 chrome.runtime.sendMessage 获取回调?【英文标题】:how to get the Callback from chrome.runtime.sendMessage in Angular 4? 【发布时间】:2018-07-30 07:32:05 【问题描述】:我真的是使用 Angular 4 和 Chrome 扩展程序的新手,但我有这段代码可以将我在 Angular 中的应用程序与 Chrome 扩展程序通信。
Angular 4 中的代码。
public myObjectExtension : any;
public getObjectChrome()
chrome.runtime.sendMessage(extensionID, 'getObject', function(response)
console.log(response);
this.myObjectExtension = reponse;
);
我的 Chrome 扩展程序中有这个。
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse)
if(request == "getObject")
sendResponse(
name: "Afro",
lastname: "Chase"
);
当我运行应用程序时,控制台日志会正确地向我显示数据,如下所示。
name: "Afro", lastname: "Chase
但是当我将“reponse”的值传递给“this.myObjectExtension”时,控制台会显示这个
TypeError: Cannot set property 'myObjectExtension' of undefined
我不明白 var “this.myObjectExtension” 没有在方法内部定义,但是我该如何检索“响应”并将其分配给我的 var “this.myObjectExtension”?
【问题讨论】:
您需要将您的方法绑定到this
myFoo=function(abc) console.log(abc);
将您的方法与myFoo.bind(this)
的范围绑定现在您可以在您的方法中访问它,chrome.runtime.sendMessage(extensionID, 'getObject', myFoo)
我不知道我是否做得对。看:myFoo=function(response) console.log(response); this.myObjectExtension=response;
和 public getObjectChrome() this.myFoo.bind(this); chrome.runtime.sendMessage(extensionID, 'getObject', this.myFoo);
两个代码都运行良好,但我无法评估 myObjectExtension 的响应值。
我找到了这个***.com/questions/21560137/…,你是对的@Pranoy Sarkar,发布你的答案。
【参考方案1】:
好的,我认为这个问题是重复的。检查此Scope in chrome message passing,但我不知道如何关闭“完全重复”之类的问题。
我可以回答这个问题,因为 Pranoy Sarkar 帮助了我。所以答案是这样的,在方法的内部
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
范围改变了,所以要改变像“myObjectExtension”这样的全局变量,我们必须将范围传递给回调。我们可以通过 javascript 的 bind 方法来实现,像这样:
public getObjectChrome()
let myFoo=function(response)
console.log(response);
this.myObjectExtension = reponse;
chrome.runtime.sendMessage(extensionID, 'getObject' myFoo.bind(this));
代码就像一个魅力。
【讨论】:
以上是关于如何在 Angular 4 中从 chrome.runtime.sendMessage 获取回调?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular 中从 js 执行空缓存和硬重新加载?
如何在 Angular 7 中从 JSON 生成 HTML FORM
如何在 Angular 6 中从父级 HTML 编辑共享组件