如何获取navbar中设置的开关变量值以供其他组件使用

Angular中跨组件共享状态有两种常用方案，你可以根据你的项目结构选择：

方案1：用共享服务实现（适合导航栏是全局公共组件的场景，最通用） #

这个方案不需要组件之间有父子嵌套关系，全局都能访问开关状态，是最适配你场景的解法：

步骤1：创建共享状态服务 #

新建table-switch.service.ts，代码如下：

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

@Injectable({ providedIn: 'root' })
export class TableSwitchService {
  // 初始化默认值为true：默认显示全家猫咪
  private isAllCatsTableSub = new BehaviorSubject<boolean>(true);
  public isAllCatsTable$ = this.isAllCatsTableSub.asObservable();

  // 修改开关状态的方法
  setSwitchStatus(status: boolean) {
    this.isAllCatsTableSub.next(status);
  }
}

步骤2：改造Actionbar组件 #

修改actionbar.component.ts，注入服务，触发状态更新：

import { TableSwitchService } from '你的服务存放路径/table-switch.service';

export class ActionbarComponent implements OnInit, OnChanges {
  isAllCatsTable: boolean;
  isMyCatsTable: boolean;
  switchName: string = "All Cats in the Family";

  // 注入服务
  constructor(private tableSwitchService: TableSwitchService) { }

  public onSwitchClick(event) {
    if (event.checked) {
      this.switchName = "All Cats in the Family";
      // 更新状态到服务
      this.tableSwitchService.setSwitchStatus(true);
    } else {
      this.switchName = "My Cats";
      this.tableSwitchService.setSwitchStatus(false);
    }
  }
}

修改actionbar.component.html，把开关的选中状态和服务值绑定：

<div class="actionbar">
  <div *ngIf="isAllCatsTable || isMyCatsTable">
    <igx-switch labelPosition="after" (change) = "onSwitchClick($event)"
                [checked]="tableSwitchService.isAllCatsTable$ | async">{{switchName}}</igx-switch>
  </div>
</div>

步骤3：改造Cat组件，订阅开关状态 #

修改cats.component.ts，注入服务订阅状态：

import { TableSwitchService } from '你的服务存放路径/table-switch.service';
import { Subscription } from 'rxjs';

export class CatComponent implements OnInit, OnDestroy {
  tableName: string;
  gridPage: string;
  private switchSub: Subscription;

  constructor(
    private router:Router, 
    public tableRefineHelper: tableRefineHelper,
    private tableSwitchService: TableSwitchService
  ) {}

  ngOnInit(): void {
    // 订阅开关状态变化，动态更新表格配置
    this.switchSub = this.tableSwitchService.isAllCatsTable$.subscribe(isAllCatsTable => {
      if (isAllCatsTable) {
         this.tableName = workloadName.allCats;
         this.gridPage = 'allCats'
      } else {
         this.gridPage = 'myCats';
         this.tableName = workloadName.myCats;
      }
    })
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.switchSub?.unsubscribe();
  }
}

方案2：@Input + @Output 父子组件传值（仅适用于Actionbar是Cat组件的直接子组件的场景） #

如果你的Cat组件模板里直接嵌套了Actionbar组件，就可以用更简单的父子传值：

1. 给Actionbar组件加Output事件，开关变化时抛给父组件：

// actionbar.component.ts 新增代码
import { Output, EventEmitter } from '@angular/core';

@Output() switchChange = new EventEmitter<boolean>();

public onSwitchClick(event) {
  if (event.checked) {
    this.switchName = "All Cats in the Family";
    this.switchChange.emit(true);
  } else {
    this.switchName = "My Cats";
    this.switchChange.emit(false);
  }
}

2. Cat组件的模板里接收事件：

<!-- cat.component.html 里的actionbar标签新增事件绑定 -->
<app-actionbar (switchChange)="onTableSwitchChange($event)"></app-actionbar>

3. Cat组件里加方法接收值即可：

// cats.component.ts 新增方法
onTableSwitchChange(isAllCatsTable: boolean) {
  if (isAllCatsTable) {
     this.tableName = workloadName.allCats;
     this.gridPage = 'allCats'
  } else {
     this.gridPage = 'myCats';
     this.tableName = workloadName.myCats;
  }
}

内容的提问来源于stack exchange，提问作者compscihelp