行为主题Sidenav切换Angular 7材料

Question

我使用角度材料，我已经在导航栏中放置了sidenav切换按钮。我试图订阅一个布尔值来切换sidenav。布尔值将传递给其中一个子组件。

我的服务：

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


@Injectable()
export class SidenavService {
    private sidenav$ : BehaviorSubject<boolean>;

    constructor() {
        this.sidenav$ = new BehaviorSubject<boolean>(false);
    }
    getData():Observable<boolean> {
        return this.sidenav$.asObservable();
    }

    updateData(data: boolean) {
        this.sidenav$.next(data);
        console.log("Changed toggle",data);

    }
}

我在导航栏组件中更新服务，如：

  sidenavtoggle(){
    this.toggleSidenav.emit();
    this.isOpen = !this.isOpen;
    console.log("IS OPEN",this.isOpen);
    this.sidenavService.updateData(this.isOpen);

    };
  }

我已经注入了服务并将其提供给组件的提供者。我订阅子组件侧边栏组件中的observable，如：

  constructor(private sidenavService:SidenavService) {
    this.prepareNavItems();

    this.subsciption=this.sidenavService.getData().subscribe(data=>{
      console.log("RECEIVED DATA",data);
      this.isExpanded=data;
    });

  }

问题是数据在加载组件时只订阅了一次，而在布尔值改变时没有改变。当调用updateData（）时，我是否继续监听布尔值的变化？

HTML：

<mat-nav-list  >

  <div class="side-bar-btn" [ngClass]="{'is-active': toggle}" (click)="clickEvent($event)">
    <div class="side-bar-btn-box">
      <div class="side-bar-btn-inner"></div>
    </div>
  </div>

  <mat-list-item *ngFor="let navItem of navItems" routerLinkActive="sidebarlinkactive" routerLink="{{navItem.link}}" >
    <a routerLinkActive="active">
      <mat-icon mat-list-icon>{{navItem.icon}}</mat-icon>
      <div matLine *ngIf="isExpanded">{{navItem.text}}</div>
    </a>
  </mat-list-item>

</mat-nav-list>

Answer 1

尝试使用async管道，我也修改了你的代码

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


@Injectable()
export class SidenavService {
    private sidenavSource$ = new BehaviorSubject<boolean>(false);
    sidenav$ = this.sidenavSource$.asObservable();

    updateData(data: boolean) {
        this.sidenavSource$.next(data);
        console.log("Changed toggle",data);

    }
}

在您的HTML中使用异步管道

constructor(public sidenavService: SidenavService) {} //make the service public

<div matLine *ngIf="sidenavService.sidenav$ | async">{{navItem.text}}</div>

<button (click)="sidenavService.updateData(true)">open</button>
<button (click)="sidenavService.updateData(false)">close</button>