chrome.tabs.query callback in angular not refreshing view

Question

我使用angular-cli为Chrome创建了一个简单的扩展。我希望扩展程序的弹出窗口显示当前选项卡的 URL。但是，从chrome.tabs.query回调设置属性时，视图似乎没有更新。我已经通过控制台确认.log正在调用回调并返回正确的URL。

我做错了什么？

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentLocation = '';
ngOnInit() {
chrome.tabs.query({"active": true, "currentWindow": true}, (tabs) => {
this.currentLocation = tabs[0].url;
console.log(tabs[0].url);
});
}
}

app.component.html

<div>
<h1>
You are at {{ currentLocation }}!
</h1>
</div>

manifest.json

{
"manifest_version": 2,
"name": "Test Extension",
"version": "1.0.0",
"permissions": [
"tabs",
"activeTab"
],
"browser_action": {
"default_title": "Open Popup!",
"default_popup": "index.html"
},
"icons": {
"19": "assets/Icon-19.png",
"38": "assets/Icon-38.png"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Answer 1

你可以像下面这样尝试(使用NgZone(：

import { Component, NgZone } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
currentLocation = "";
ngOnInit(private _ngZone: NgZone) {
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
this._ngZone.run(() => {
this.currentLocation = tabs[0].url;
});
});
}
}