Question

我正在尝试使div从其他组件中的另一个按钮切换。我提供了一项服务，并且能够获取在true和false之间更新的值，但是由于某些原因，单击它时html不能显示（我console.log，每次单击按钮都可以看到该值更改）。任何对此的见解将不胜感激。下面是一些代码供参考。服务

这是更新布尔值的服务

    import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SidebarFilterService {
  isSidebarVisible: boolean;

  sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

  constructor()  {
      this.sidebarVisibilityChange.subscribe((value) => {
          this.isSidebarVisible = value
      });
  }

  toggleSidebarVisibility() {
      this.sidebarVisibilityChange.next(!this.isSidebarVisible);
  }
}

侧面组件

应注意值更改但不会更改的侧面组件。我相信问题就在这里。

import { Component, OnInit } from '@angular/core';
import {SidebarFilterService} from '../../shared/services/sidebar-filter.service'

@Component({
  selector: 'app-side-filter',
  templateUrl: './side-filter.component.html',
  styleUrls: ['./side-filter.component.scss'],
  providers: [SidebarFilterService]
})
export class SideFilterComponent implements OnInit {
  asideVisible: boolean;

  constructor(public sidebarService: SidebarFilterService) { 
    this.asideVisible = sidebarService.isSidebarVisible;
  }

  ngOnInit() {
  }

}

组件中用于更新服务的代码

这似乎按预期工作，因为其他组件中的console.log会相应更改。

 get isSidebarVisible(): boolean {
    return this.sidebarService.isSidebarVisible;
  }

  toggleSidebar() {
    this.sidebarService.toggleSidebarVisibility()
    let test = this.isSidebarVisible;
    console.log(test);
  }

HTML 最后，这里是单击按钮时应更新的HTML，但不是。我将此div设置为背景色。只是努力使其显示（因此为什么它没有代码）。

<div *ngIf="asideVisible" class="side-filter">

</div>

基于布尔的角更新可见性

0 个答案: