组件无法订阅数据源 [英] Component cannot subscribe to data source
问题描述
我让这个组件监听来自服务的消息.请注意,下面显示的每个 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);
}
}
有谁知道为什么当 changeMessage()
被调用时,subscribe()
回调没有被调用?
does anyone know why when changeMessage()
is called, that the subscribe()
callback does not get invoked?
一个重要提示是,当我使用 new BehaviorSubject
而不是 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.sendMessage
或 chrome.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屋!