Question

我正在开发chrome扩展程序。我有一个background.js可以在特定条件下获取数据。

条件满足时，激活pageAction
当用户单击扩展程序图标时，我正在向 “ background.js”和“ background.js”向我回复数据。

尽管我正在更新组件属性，但更改未反映UI。

background.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  sendResponse(this.data);
});

app.component.ts

import {Component, OnInit} from '@angular/core';


// @ts-ignore
const CHROME = chrome;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Title';
  response: any;

  constructor() {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      this.title = response.title;
      this.response = JSON.stringify(response);
      console.log(response.title);
    });
  }

  clickMe() {
    console.log('Before:' + this.title);
    this.title +=  ' !!';
  }
}

app.component.html

  <div style="text-align:center">
   <h1> Title: {{title}}</h1>
   <h1> Response: {{response}}</h1>
  </div>

<button (click)="clickMe()" >Click Me!</button>

就我而言，我正在从另一个范围更新app.component的属性，因为Angular无法意识到数据已更改。

当我单击“角度”按钮时，我已经添加了一个按钮，检测到“标题”字段已更改，因此它会更新用户界面。

如何从另一个上下文更新UI？

更新

由于已在另一个范围中进行了更改，因此Angular无法检测到更改，所以我必须强迫它：

constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      //...
      this.changeDetectorRef.detectChanges();
    });
  }

Answer 1

我不太确定为什么当您将所有内容都放在同一个组件中时，为什么要首先使用Subject。尝试摆脱这种情况，并使用ngOnInit代替constructor。

import { Component, OnInit } from '@angular/core';

// @ts-ignore
const CHROME = chrome;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Title';
  response: any;

  constructor() {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      this.title = response.title;
      this.response = response;
    });
  }
}

Angular Chrome Api数据绑定不起作用

1 个答案: