Кажется, что Наблюдатель не выполняется, когда наблюдаемое меняет свое значение. - PullRequest
Новая
       41

Кажется, что Наблюдатель не выполняется, когда наблюдаемое меняет свое значение.

1 голос
/ 07 октября 2019

Наблюдатель, кажется, инициализирует подписку просто отлично. Однако, когда значение уровня изменяется, наблюдатель не выполняет функцию, которую он предполагает. Я что-то упустил?

Вы можете проверить мой репозиторий на 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) {

    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

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Решение было простым. Я был неверно направлен в начале из-за документации. Согласно этому URL:

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

"Когда вы предоставляете сервис на корневом уровне, Angular создает один общий экземпляр HeroService и внедряет его в любой класс, который его запрашивает. "

Я подумал, что LayerMsgService является общим для всех классов. Однако я должен был указать это в качестве аргумента в классе MyButtons.

layer-msg.service.ts 

constructor(el: Element, layerMsgService : LayerMsgService  ) {
// code...
}
0 голосов
/ 07 октября 2019

Функция setLayer из службы отвечает за выдачу новых значений.

Она вызывается в функции controller.changeLayer, которая сама вызывается при нажатии кнопки, определенной ранее.

если поток не создает новое событие, это, вероятно, означает, что кнопки не выполняют свою работу.

Видя, что вы используете addEventListener, я бы сначала сказал вам изменить на btn.onclick = (event) => {...}, чтобы попробовать.

если это все еще не работает, попробуйте посмотреть, работают ли нажатия кнопок, и если они этого не делают, это означает, что вы либо не нажимаете на правильные, либо вы вне контекста Angular (см. NgZone )

...