如何切换TypeScript Interface多值实现Angular12面板互斥打开

推荐编写通用切换方法，后续新增面板也不用调整核心逻辑，适配性更强。

步骤1：定义面板键类型（可选但推荐，规避TS类型报错） #

在定义PanelModel的同文件补充类型声明：

export type PanelKey = keyof PanelModel

步骤2：在服务中新增通用激活方法 #

// 你的服务类内代码
public setActivePanel(activeKey: PanelKey): void {
  // 先把所有面板状态重置为关闭
  Object.keys(this.chosen).forEach((key) => {
    this.chosen[key as PanelKey] = false
  })
  // 仅打开目标面板
  this.chosen[activeKey] = true
}

如果面板数量固定不会新增，也可以直接全量赋值对象，写法更直观：

// 点击apps图标时直接执行这段代码即可
this.chosen = {
  apps: true,
  payroll: false,
  chat: false,
  mycloud: false
}

步骤3：模板绑定点击事件 #

操作栏图标绑定点击事件时传入对应面板的键即可：

<!-- apps图标绑定示例 -->
<app-icon (click)="你的服务实例名.setActivePanel('apps')"></app-icon>
<!-- payroll图标绑定示例 -->
<app-icon (click)="你的服务实例名.setActivePanel('payroll')"></app-icon>
<!-- 其余图标同理传入对应键值即可 -->

面板显隐直接通过服务的chosen属性判断即可，示例：

<div *ngIf="你的服务实例名.chosen.apps">apps面板内容</div>

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