Переменная Angular2 в службе не обновляется - PullRequest
Новая
       10

Переменная Angular2 в службе не обновляется

0 голосов
/ 08 июня 2018

У меня есть компонент с условным классом.У компонента-брата есть событие click, которое передает true в сервисную функцию.Функция активирована, но значение в сестре не обновляется для активации класса:

html: 

<div class="location-details flyout" ng-class="{'active': flyoutState}">
    ...
</div>

flyout.component.ts: 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FlyoutService } from './flyout.service';

@Component({
  selector: 'app-flyout',
  templateUrl: './flyout.component.html',
  styleUrls: ['./flyout.component.scss']
})
export class FlyoutComponent implements OnInit, AfterViewInit {

  flyoutState: Boolean;

  constructor(private flyoutservice: FlyoutService) {}

  ngOnInit() {
  }

  ngAfterViewInit(){
    this.flyoutservice.flyoutActive.subscribe(flyoutState => this.flyoutState = flyoutState);
...
  }

}

map.component.ts: 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FlyoutService } from '../flyout/flyout.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {

    flyoutState: Boolean;


  constructor(private flyoutservice: FlyoutService) { 

  }

  ngOnInit() {
  }

  ngAfterViewInit() {

    this.flyoutservice.flyoutActive.subscribe(flyoutState => this.flyoutState = flyoutState);

      let mapFlyoutService = this.flyoutservice;

      function stationClick(l, i, s) {
        /*
        console.log(l); // locaiton
        console.log(i); // id
        console.log(s); // siblings w/ data
        */

          mapFlyoutService.changeFlyoutState(!this.flyoutActive);

      }
  }

}

flyout.service.ts: 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class FlyoutService {
  private flyoutState = new BehaviorSubject(false);
  flyoutActive = this.flyoutState.asObservable();

  constructor() { }

  changeFlyoutState(flyoutState: Boolean) {
    this.flyoutState.next(flyoutState);
    console.log(flyoutState);
  }

}

Обратите внимание, что если я этого не сделаю, let mapFlyoutService = this.flyoutservice; и использую this.flyoutservice вstationClick() функция говорит, что flyoutservice не определено.Не уверен, что проблема myFlyoutService.

Вы заметите, что я пытаюсь просто перевернуть значение между true / false с помощью этого mapFlyoutService.changeFlyoutState(!this.flyoutActive);, но оно всегда записывает true, означающее начальное состояниеfalse никогда не обновляется.

Кроме того, класс никогда не добавляется.Эта функция должна включать и выключать класс, но не имеет никакого эффекта.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018 
  stationClick(l, i, s) => {
    /*
    console.log(l); // locaiton
    console.log(i); // id
    console.log(s); // siblings w/ data
    */

      this.flyoutservice.changeFlyoutState(!this.flyoutActive);

  }

Используйте способ записи функций es6, он сохранит область, внутри функции при использовании this он получает область window, а не область component.У окна нет свойства flyoutActive.поэтому !undefined всегда true.Это также причина, почему this.flyoutservice является undefined.

0 голосов
/ 08 июня 2018

ng-class в стиле AngularJS

Используйте ngClass вместо

Также избегайте вызова функций, которые могут изменить пользовательский интерфейс в обработчике AfterViewInit

...