组件无法订阅数据源 [英] Component cannot subscribe to data source

查看:39
本文介绍了组件无法订阅数据源的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我让这个组件监听来自服务的消息.请注意,下面显示的每个 console.log() 语句至少被命中一次,所有内容都会被记录. 也就是说,除了向数组添加消息"之外 - 不会被记录,但应该被记录!

I have this component listening for messages from a service. Note that every console.log() statement shown below is hit at least once, everything gets logged. That is, except "adding message to array" - that does not get logged, but it should get logged!

这是组件:

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;
  }

}

这是数据源(Angular 服务):

here is the data source (an Angular service):

///<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);
  }


}

有谁知道为什么当 changeMes​​sage() 被调用时,subscribe() 回调没有被调用?

does anyone know why when changeMessage() is called, that the subscribe() callback does not get invoked?

一个重要提示是,当我使用 new BehaviorSubject('initial'); 而不是 new Subject() - 然后 初始 确实到达并记录了向数组添加消息".

One big hint is that when I use new BehaviorSubject<Object>('initial'); instead of new Subject<Object>() - then initial does arrive and 'adding message to array' is logged.

推荐答案

我使用 NgZone 修补了 Chrome Messaging API 以在应用通过 chrome.runtime.sendMessagechrome.runtime.onMessage.
这是我在 chrome 扩展中使用的服务.

I monkey patched Chrome Messaging API with NgZone to update the view when app gets the response back from background page via chrome.runtime.sendMessage OR chrome.runtime.onMessage.
Here is the service I used in my chrome extension.

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 是您的).此外,这篇文章的反向链接是纯文本,而不是锚点或可点击元素.希望您能纠正您网站上存在的这些问题.

@Olegzandr, I got here on this thread from DevKit.life. I wanted to contact you for the solution to this problem but couldn't found any contact-us page on your website (assuming Devkit.life is yours). Also, the backlink to this post is in a plain text and not an anchor or clickable element. Hopefully, you would correct these issue present on your website.

这篇关于组件无法订阅数据源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆