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;并在this.flyoutservice函数中使用stationClick()，则表示flyoutservice未定义。不确定myFlyoutService是否是问题。

你会注意到我试图在mapFlyoutService.changeFlyoutState(!this.flyoutActive);之间翻转true / false之间的值，但它总是记录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的函数

服务中的Angular2变量不更新

2 个答案: