Question

以下代码在angular2中剪切。网址是按照预期开始工作的。如果我运行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

使用chrome.tab.query生成的值，Observable无法正常工作

1 个答案: