根据BehaviorSubject状态将函数传递给角度单击处理程序

Question

我有一个带有按钮的工具栏，该按钮随每个不同的页面或情况而变化，包括单击时所做的动作。我使用BehaviorSubject传递数据，然后基于该数据。我更改了工具栏的外观和功能。但是我面临的问题是，只要BehvaiorSubject数据发生更改，该操作就会立即完成。

预期：无论状态如何变化，都不应触发与其相关的动作。仅应在单击时触发。当情况发生变化时，操作必须更改，但不应触发。

这是我的代码：

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  TemplateRef
} from "@angular/core";
import { appearence } from "../animations/app-bar";
import { AppBarService } from "../services/app-bar.service";
import { Router } from "@angular/router";
import { MatDrawer, MatToolbarRow } from "@angular/material";
import { AuthService } from "../services/auth.service";
import { NgStyle } from "@angular/common";

@Component({
  selector: "app-nav",
  templateUrl: "./app-nav.component.html",
  styleUrls: ["./app-nav.component.scss"],
  animations: [appearence]
})
export class AppNavComponent implements OnInit {
  position = 0;
  appBarState = "hidden";
  /**Icon on navbar */
  icon = "menu";

  /** Whether the icon is hidden */
  iconHidden = false;

  /** title of toolbar */
  title = "Welcome!";

  /** Tooltip text */
  tooltipText = "Site menu!";

  /** Drawer */
  @ViewChild("drawer") drawer: MatDrawer;

  /** Title row */
  @ViewChild("titleRow") titleRowRef: ElementRef;

  /** App Bar */
  @ViewChild("appBar") appBarRef: ElementRef;

  styles = {
    appBar: {
      "bottom.px": 0
    }
  };

  constructor(
    public appBarService: AppBarService,
    public router: Router,
    private authService: AuthService
  ) {}

  handleNav() {
    // App bar
    const appBar = document.querySelector("#app-bar");

    const firstRowHeight = this.titleRowRef.nativeElement.offsetHeight;
    const appBarHeight = appBar.clientHeight;

    this.styles.appBar["bottom.px"] = -1 * (appBarHeight - firstRowHeight);

    this.iconHidden = this.iconHidden ? false : true;
  }

  ngOnInit() {
    this.appBarState = "visible";
    this.adaptiveNavbar();
    this.handleNav();
    this.adaptiveAction();
  }

  toggleToolbar($event: Event) {
    const scroll = $event.srcElement.scrollTop;
    let scrollDirection;
    scrollDirection = scroll > this.position ? "down" : "up";

    if (scrollDirection === "down") {
      this.appBarState = "hidden";
    } else {
      this.appBarState = "visible";
    }
    /** Comes at the last of function */
    this.position = scroll;
  }

  async adaptiveAction() {
    return await this.appBarService.state$.subscribe(data => {
      switch (data.id) {
        case "auth":
          this.backToHome();
          break;

        default:
          this.handleNav();
          break;
      }
    });
    this.appBarService.state$.subscribe(console.log);
  }
  backToHome() {
    this.router.navigate([""]);
  }

  /** Manages the working of navbar based on its state */
  adaptiveNavbar(): void {
    this.appBarService.state$.subscribe(data => {
      switch (data.id) {
        case "auth":
          /** Menu icon --> Back icon
           * Text --> Tap the icon
           */
          this.icon = "arrow_back_rounded";
          this.title = "Click on the icon";
          this.tooltipText = "Back to home";
          break;

        case null:
          this.icon = "menu";
          this.title = "Welcome!";
          this.tooltipText = "Site Menu";
          break;
      }
    });
  }
}

注意：有关的函数是adaptiveNavbar（）。 HTML模板：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" mode="over">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="/login">Login</a>
      <a mat-list-item routerLink="/signup">Sign Up</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content (scroll)="toggleToolbar($event)">
    <!-- <button (click)="appBarState = appBarState == 'visible' ? 'hidden' : 'visible'">Hello</button> -->
    <router-outlet></router-outlet>
    <mat-toolbar [ngStyle]="styles.appBar" [@appearence]="appBarState" [style.transform]="'translateY(100%)'" id="app-bar" color="primary"
      #appBar>
      <mat-toolbar-row #titleRow>
          <button [matTooltip]="'Site Menu'" mat-icon-button (click)="adaptiveAction()">
            <mat-icon *ngIf="iconHidden">{{icon}}</mat-icon>
            <mat-icon *ngIf="!iconHidden">clear</mat-icon>
          </button>
        <span *ngIf="iconHidden">{{title}}</span>
        <span *ngIf="!iconHidden">Menu</span>
      </mat-toolbar-row>
      <mat-toolbar-row>Hi</mat-toolbar-row>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

正在等待解决方案。请随时在评论中进行澄清。 谢谢！