如何將RxJSOberservable<boolean>從true切換為false，反之亦然-有解無憂

我正在學習 Angular，我有一個非常簡單的問題：我有一個 Observable，用于跟蹤側邊選單是關閉還是打開。我可以讓我的 Observable 以“true”作為值開始，但我真的不明白如何交換它，所以它執行以下邏輯：value = !value

這是我的服務：

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

@Injectable({
  providedIn: 'root'
})
export class SideMenuService {
  private open$ = new Observable<boolean>().pipe(
    startWith<boolean>(true)
  );

  constructor() { }

  getOpen() {
    return this.open$;
  }

  swapOpen() {
    // Here I want to make open$ to be false
  }
}

這是我的打字稿檔案：

import { Component, OnInit } from '@angular/core';
import { SideMenuService } from "../../../services/side-menu/side-menu.service";

@Component({
  selector: 'side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {

  public open!: boolean;

  constructor(
    private sideMenuService: SideMenuService
  ) { }

  ngOnInit(): void {
    this.sideMenuService.getOpen()
      .subscribe(result => this.open = result);
  }

  swtichTriggered(): void {
    this.sideMenuService.swapOpen();
  }
}

如何在 swapOpen() 函式中正確切換值？

uj5u.com熱心網友回復：

通過掃描的一些 RxJS 運算子魔法

（在手機上，請原諒格式）

toggle$ = new Subject<void>()

// either subscribe or better yet use async pipe in component
isOpen$ = toggle$.pipe(
    // start with true then switch on toggle emission 
    scan((acc, _) => !acc, true)
)

toggle$.next() // triggers isOpen$ i.e. use in swapOpen

// don’t forget to clean up subscriptions

uj5u.com熱心網友回復：

您可以創建一個 BehaviourSubject 并在側邊欄打開或關閉時切換其值

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

@Injectable({
  providedIn: 'root'
})
export class SideMenuService {
  private open$ = new BehaviourSubject<boolean>(true);

  constructor() { }

  getOpen() {
    return this.open$;
  }

  swapOpen(value: boolean) {
    this.open$.next(value);
  }
}

在您正在查看組件的組件中

import { Component, OnInit } from '@angular/core';
import { SideMenuService } from "../../../services/side-menu/side-menu.service";

@Component({
  selector: 'side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {

  public open!: boolean;

  constructor(
    private sideMenuService: SideMenuService
  ) { }

  ngOnInit(): void {
    this.sideMenuService.getOpen()
      .subscribe(result => this.open = result);
  }

  swtichTriggered(): void {
    this.sideMenuService.swapOpen(!this.open);
  }
}

Subject使用 a over an的好處之一Observable是它是多播的，因此只有一個 the 的實體Subject將用于將值傳遞給它的Observers.

Observable通過 using運算子可以實作相同的行為，該share運算子基本上Subject在其實作下使用 a 。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/510208.html

標籤：有角度的rxjsrxjs-observables

上一篇：AngularOnInitforlooppush回傳一個空陣列

下一篇：(gcloud.app.deploy)：錯誤回應：AppEngineapppot和AppEngine柔性環境服務帳戶必須對影像具有權限