Question

我让这个组件侦听来自服务的消息。 请注意，下面显示的每个console.log（）语句至少会被命中一次，所有内容都会被记录。也就是说，除了＆＃34;将消息添加到数组＆＃34; - 没有记录，但它应该被记录！

以下是组件：

 console.log(location.findIndex(value => value.id === filterLocation[0].id )));

这里是数据源（Angular服务）：

import {Component, OnInit, Inject} from '@angular/core';
import {ChromeDataService} from '../../../../shared/services/events';


@Component({
  providers: [ChromeDataService],
  selector: 'app-events-list',
  templateUrl: './events-list.component.html',
  styleUrls: ['./events-list.component.scss']
})

export class EventsListComponent implements OnInit {

  isShowEventsList = false;
  events = [];

  constructor(private data: ChromeDataService) {
       console.log('events list component is constructed.');
  }

  ngOnInit() {
    console.log('events list component ngOnInit called.');
    this.data.currentMessage.subscribe(message => {
      console.log('adding message to array: ', message);
      this.events.push(message);
    })
  }

  showEventsList() {
    this.isShowEventsList = true;
  }

  hideEventsList() {
    this.isShowEventsList = false;
  }

}

是否有人知道调用///<reference types="chrome"/> import {Injectable, Component, Inject} from '@angular/core'; import {ReplaySubject} from "rxjs/ReplaySubject"; @Injectable() export class ChromeDataService { private messageSource = new ReplaySubject<Object>(); public currentMessage = this.messageSource.asObservable(); private isListening: boolean = false; private listener: any; constructor() { const self = this; this.listener = function (msg, sender, sendResponse) { const parsed = JSON.parse(msg); console.log('extension received a message:', parsed); self.changeMessage(parsed); }; } changeMessage(message: Object) { this.messageSource.next(message); } stopListening() { this.isListening = false; chrome.runtime.onMessage.removeListener(this.listener); } startListening() { this.isListening = true; chrome.runtime.onMessage.addListener(this.listener); } }时为什么不调用changeMessage()回调？

一个很大的提示是，当我使用subscribe()代替new BehaviorSubject<Object>('initial');时，new Subject<Object>()确实会到达，并且会向数组添加消息＆＃39;已记录。

Answer 1

我使用NgZone修补Chrome Messaging API，以便在应用通过chrome.runtime.sendMessage或chrome.runtime.onMessage从后台页面获取回复时更新视图。
这是我在chrome扩展中使用的服务。

import { Injectable, NgZone } from "@angular/core";
import { Subject } from "rxjs/Subject";
import { Observable } from "rxjs/Observable";

/*
NgZone monkey patched chrome messaging service.
*/
@Injectable()
export class ChromeMsgSrv {

   constructor(private _ngZone: NgZone) { }

   public send(msg: any, cb: (resp: any) => any) {
      chrome.runtime.sendMessage(msg, (resp: any) => {
         this._ngZone.run(() => cb(resp))
      })
   }

   public onMsg(cb: (msg: any) => any) {
      chrome.runtime.onMessage.addListener((msg: any) => {
         this._ngZone.run(() => cb(msg))
      })
   }

}

@Olegzandr，我来自DevKit.life的这个帖子。我想与您联系以解决此问题，但无法在您的网站上找到任何联系我们页面（假设Devkit.life是您的）。此外，此帖子的反向链接是纯文本，而不是锚点或可点击元素。希望您能纠正网站上出现的这些问题。

Answer 2

试试这个：

changeMessage = (message : Object) => {}

并使用Subject代替replay。

Answer 3

简而言之，因为我在多个地方呼叫providers:[ChromeDataService]，我的服务不止一次被创建。所以我订阅了错误的服务。

请参阅：

@Injectable service does not seem to be a singleton

组件无法订阅数据源

3 个答案: