角度未刷新视图中的chrome.tabs.query回调 [英] chrome.tabs.query callback in angular not refreshing view

问题描述

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

I have created a simple extension for Chrome using angular-cli. I want the extension's popup to display the URL of the current tab. However the view does not seem to get updated when setting a property from chrome.tabs.query callback. I have confirmed with a console.log that the callback is getting called and the correct URL is being returned.

我在做什么错了?

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'"
}

推荐答案

您可以尝试以下操作(使用NgZone):

You could tried like below (using 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回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！