1

With the following code snipped in angular2. the url is working beginning given as aspected. If i run processTab without running it through chrome.tabs.query's asynchronous callback. it works perfectly but if i run it within the callback. the value is being passed to the processTab function but it is not working properly.

Not Working**

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);

}

Working:

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);

}

but the value is being passed to processTab in both instances.

James Woods
  • 145
  • 1
  • 9

1 Answers1

0

I assume chrome.tabs.query is not covered by zone.js. You need to make the code run explicitly inside Angulars zone for change detection detect model changes

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);
      });
    });

   ...

  }
}

also prefer arrow functions instead of self

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you so much. I spent all weekend trying to figure it out. This was my first time working with external functionality in angular 2. been working with it since july but I never really had a look into zone.js. I will be looking into it so i can master it because of your answer. again. you saved me ages time trying. and also thank you with the arrow functions. i do prefer it now also. was stuck in the javascript namespace mentality. ;) – James Woods May 22 '16 at 18:56
  • Usually you don't even be aware that Angular2 uses zones. Most async APIs (`addEventListener`, `setTimeout`, ...) are patched so that Angular gets notified when such events have happened ad uses this to run change detection. For events that are not covered like in your case, or when external libraries are used that are initialized outside Angular, Angular needs some help. If the event handler only changes the model one of http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually might do, but if it calls other code – Günter Zöchbauer May 22 '16 at 19:08
  • (like `router.navigate(...)`) these might not be sufficient. `zone.run(...)` works in all cases. – Günter Zöchbauer May 22 '16 at 19:08