javascript - Observable 无法按预期使用 chrome.tab.query 生成的值工作

Question

在 angular2 中截取以下代码。 url 正在开始工作，按方面给出。如果我运行 processTab 而不通过 chrome.tabs.query 的异步回调运行它。它工作得很好，但如果我在回调中运行它。该值正在传递给 processTab 函数，但它无法正常工作。

不工作**

randomFunction() {
    var self = this,
        curl:string;

    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        // self.updateUrl = tab.url.replace(/.*?:\/\//g, "") 
        curl = tabs[0].url.replace(/.*?:\/\//g, "").replace(/\/$/, "");
        self.processTab(curl);
    });



}

processTab(url:string) {

    this.listService.getData(url)
                .subscribe(
                    data => this.data = data,
                    error => this.errorMessage = <any>error);
     console.log("the url: " + url);

}

工作:

randomFunction() {
   this.processTab("www.whateverurl.com");

}

processTab(url:string) {

    this.listService.getData(url)
                .subscribe(
                    data => this.data = data,
                    error => this.errorMessage = <any>error);
     console.log("the url: " + url);

}

但是在这两个实例中值都被传递到 processTab。

Answer 1

我假设 zone.js 未涵盖 chrome.tabs.query。您需要使代码在 Angulars 区域内显式运行，以进行更改检测以检测模型更改

class SomeClass {
  constructor(private zone:NgZone) {}

  randomFunction() {
        curl:string;

    chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
      this.zone.run(() => {
        // this.updateUrl = tab.url.replace(/.*?:\/\//g, "") 
        curl = tabs[0].url.replace(/.*?:\/\//g, "").replace(/\/$/, "");
        this.processTab(curl);
      });
    });

   ...

  }
}

也更喜欢箭头函数而不是 self