服务中的 Angular2 变量未更新

Question

我有一个带有条件类的组件。同级组件有一个单击事件，该事件将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; 并在stationClick() 函数中使用this.flyoutservice，它会说flyoutservice 未定义。不确定myFlyoutService 是否是问题所在。

你会注意到我试图用这个mapFlyoutService.changeFlyoutState(!this.flyoutActive); 来翻转真/假之间的值，但它总是记录true，这意味着false 的初始状态永远不会更新。

此外，该类永远不会被添加。该函数应该“打开和关闭”类，但没有效果。

Answer 1

  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的原因。

Answer 2

ng-class 是 AngularJS 风格

改用ngClass

还要避免在 AfterViewInit 钩子中调用可能改变 UI 的函数