观察者似乎在每当观察者改变其值时都不会执行

Question

观察者似乎可以初始化订阅。但是，当图层的值更改时，观察者将不会执行它应该执行的功能。我想念什么吗？

您可以在github上查看我的存储库：https://github.com/stefiHB/ol-angular-ionic

layer-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,
              private renderer: Renderer2) {

    this.layerSub = this.layerService.getLayer().subscribe(
      l => {
        if (l) {
          if (this.myText) {
            this.myText.innerHTML = 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）