每当可观察对象更改其值时，观察者似乎都不会被执行

Question

观察者似乎很好地初始化了订阅。但是，当图层的值发生变化时，观察者不会执行它应该执行的功能。我错过了什么吗？

您可以在 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);
  }
}

MyButtons.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

Answer 1

服务中的函数setLayer 负责发出新值。

它在controller.changeLayer 函数中被调用，它本身在按钮点击时被调用，定义稍早。

如果流没有产生新的事件，这可能意味着按钮没有发挥作用。

看到你用addEventListener，我先告诉你换成btn.onclick = (event) => {...}试试。

如果它仍然不起作用，请尝试查看按钮点击是否有效，如果它们不起作用，则意味着您没有点击正确的按钮，或者您超出了 Angular 的上下文（请参阅NgZone )

Answer 2

解决方案很简单。由于文档，我在开始时被误导了。根据这个网址：

https://angular.io/tutorial/toh-pt4#provide-the-heroservice

“当你在根级别提供服务时，Angular 会创建一个单一的、共享的 HeroService 实例并注入到任何需要它的类中。”

我认为 LayerMsgService 是在所有类之间共享的。但是，我必须在 MyButtons 类中将其作为参数提供。

层-msg.service.ts

constructor(el: Element, layerMsgService : LayerMsgService  ) {
// code...
}