Question

我使用angular-cli为Chrome创建了一个简单的扩展程序。我希望扩展程序的弹出窗口显示当前选项卡的URL。但是，从chrome.tabs.query回调设置属性时，视图似乎没有更新。我已经通过console.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;
            });
        });
    }
}

chrome.tabs.query回调角度不刷新视图

1 个答案: