组件无法订阅数据源
[英] Component cannot subscribe to data source
本文介绍了组件无法订阅数据源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个组件监听来自服务的消息。请注意，下面显示的每个console.log（）语句至少被命中一次，所有内容都被记录下来。除了将消息添加到数组之外，它不会被记录，但它应该被记录！
以下是组件：
import {Component，OnInit ，从'@ angular / core'注入};
从'../../../../shared/services/events'导入{ChromeDataService};
$ b @Component（{
providers：[ChromeDataService]，
selector：'app-events-list'，
templateUrl：'./events -list.component.html'，
styleUrls：['./events-list.component.scss']
}）
导出类EventsListComponent实现OnInit {
isShowEventsList = false;
events = [];
构造函数（私有数据：ChromeDataService）{
console.log（'events list component is constructed。'）;
ngOnInit（）{
console.log（'events list component ngOnInit called。'）;
this.data.currentMessage.subscribe（message => {
console.log（'add message to array：'，message）;
this.events.push（message）;
}）
}
showEventsList（）{
this.isShowEventsList = true;
}
hideEventsList（）{
this.isShowEventsList = false;
}
}
这里是数据源Angular service）：
///< reference types =chrome/>
从'@ angular / core'导入{Injectable，Component，Inject};
从rxjs / ReplaySubject导入{ReplaySubject};
@Injectable（）
导出类ChromeDataService {
private messageSource = new ReplaySubject< Object>（）;
public currentMessage = this.messageSource.asObservable（）;
private isListening：boolean = false;
私人侦听器：any;
构造函数（）{
const self = this;
this.listener =函数（msg，sender，sendResponse）{
const parsed = JSON.parse（msg）;
console.log（'extension received a message：'，parsed）;
self.changeMessage（解析）;
};
}
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（）回调没有被调用？
当我使用新BehaviorSubject< Object>（'initial'）; 而不是时，新主题< Object>（） - 然后初始确实到达并且'将消息添加到数组'被记录下来。
或 chrome.runtime.onMessage 。
这是我在我的Chrome扩展中使用的服务。
从@ angular / core导入{Injectable，NgZone};
从rxjs / Subject导入{Subject};
从rxjs / Observable导入{Observable};
/ *
NgZone猴子修补的Chrome邮件服务。
* /
@Injectable（）
导出类ChromeMsgSrv {
构造函数（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 。生命。我想与您联系以解决此问题，但无法在您的网站上找到任何联系人 - 我们的页面（假设Devkit.life是您的）。此外，这篇文章的反向链接是纯文本而不是锚点或可点击的元素。希望你能改正你网站上出现的这些问题。
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!
Here is the component:
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;
}
}
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);
}
}
does anyone know why when changeMessage() is called, that the subscribe() callback does not get invoked?
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.
解决方案
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, 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屋！
查看全文
