angular - 每当可观察对象更改其值时,观察者似乎都不会被执行
问题描述
观察者似乎很好地初始化了订阅。但是,当图层的值发生变化时,观察者不会执行它应该执行的功能。我错过了什么吗?
您可以在 github 上查看我的存储库: https ://github.com/stefiHB/ol-angular-ionic
层-msg.service.ts
import { Injectable } from '@angular/core';
import {BehaviorSubject, Observable, Subject} from 'rxjs';
import {customMapLayers} from './customMapLayers';
@Injectable({
providedIn: 'root'
})
export class LayerMsgService {
private layer = new BehaviorSubject<customMapLayers>(customMapLayers.pwd);
constructor() { }
getLayer() {
return this.layer.asObservable();
}
setLayer(mapLayer: customMapLayers) {
this.layer.next(mapLayer);
console.log('Setting new value...', this.layer.value);
}
}
我的按钮.ts
import {LayerMsgService} from './layer-msg.service';
import {customMapLayers} from './customMapLayers';
export class MyButton {
private layerService: LayerMsgService;
buttonPWD: HTMLButtonElement;
buttonOSM: HTMLButtonElement;
myElement: Element;
constructor(el: Element) {
this.layerService = new LayerMsgService();
this.buttonPWD = document.createElement('button');
this.buttonPWD.innerHTML = 'pwd';
this.buttonOSM = document.createElement('button');
this.buttonOSM.innerHTML = 'osm';
this.buttonOSM.addEventListener('click', () => this.changeLayer(customMapLayers.osm));
this.buttonPWD.addEventListener('click', () => this.changeLayer(customMapLayers.pwd));
el.appendChild(this.buttonPWD);
el.appendChild(this.buttonOSM);
}
changeLayer(l: customMapLayers) {
console.log('Request for Changing layer...');
this.layerService.setLayer(l);
}
}
app.component.ts
import {Component, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {LayerMsgService} from './layer-msg.service';
import {Subscription} from 'rxjs';
import {MyButton} from './MyButton';
import {customMapLayers} from './customMapLayers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
title = 'ObservablesMashup';
layer: customMapLayers;
layerSub: Subscription;
private myBtn: MyButton;
myText: Element;
constructor(private layerService: LayerMsgService) {
this.layerSub = this.layerService.getLayer().subscribe(
l => {
if (l) {
console.log('Getting layer... ', l);
this.layer = l;
}
});
}
ngOnInit(): void {
const el = document.getElementById('map');
console.log(el);
this.myBtn = new MyButton(el);
this.myText = document.getElementById('p1');
}
ngOnDestroy(): void {
this.layerSub.unsubscribe();
}
}
我尝试使用btn.onclick = (event) => {...}
,但似乎无法解决问题。
我希望控制台记录:
Request for Changing layer...
Setting new value... PWD
Changing Layer... PWD
但是观察者的功能没有被执行所以这是我点击按钮时的实际日志:
Request for Changing layer...
Setting new value... PWD
解决方案
解决方案很简单。由于文档,我在开始时被误导了。根据这个网址:
https://angular.io/tutorial/toh-pt4#provide-the-heroservice
“当你在根级别提供服务时,Angular 会创建一个单一的、共享的 HeroService 实例,并注入到任何需要它的类中。”
我认为 LayerMsgService 在所有类之间共享。但是,我必须在 MyButtons 类中将其作为参数提供。
层-msg.service.ts
constructor(el: Element, layerMsgService : LayerMsgService ) {
// code...
}
推荐阅读
- scala - 使用scala反射获取构造函数参数值
- node.js - HLF 结构网络无法从 node-red 连接到 IBP2 对等体
- entity-framework - 使用 EF6 和 SQLite 在视图中插入
- php - 当我尝试对多个数组进行排序时,array_multisort() 不起作用
- command-line-interface - 如何使用 IBM CLI 从 IBM 云对象存储导入图像
- php - EasyApache 4:“PHP 启动:无法加载动态库 'pdo_mysql.so'”
- google-chrome - 从文件安装 Chrome 扩展时出错:CRX_HEADER_INVALID
- laravel - 用于 laravel 应用程序的 Gitlab CICD 未部署?
- spring-data-jpa - 如何在spring boot jpa中@Query注释中的@ManyToMany关系中使用in子句
- asp.net - HTTP 错误 403.14 - 在 ASP.NET MVC API 本地网站上被禁止