Angular 按钮组切换显示实现方案及逻辑存放位置咨询

方案合理性说明 #

你当前打算用*ngIf做条件判断的思路是完全合理的，属于Angular开发中处理视图切换的常规最优方案，完全不需要额外引入其他复杂逻辑。

至于逻辑放模板还是ts文件，完全看你的业务扩展需求：

• 如果只是单纯做按钮组切换，没有其他附加操作，直接在模板里修改状态变量即可，代码更简洁
• 如果切换时需要附加埋点、权限校验、接口调用等逻辑，把切换动作封装到ts的方法里更便于后续维护

可直接运行的实现代码 #

1. 极简实现（无附加逻辑场景）

HTML代码

<!-- 第一组按钮，默认展示 -->
<div *ngIf="!isButtons">
  <button (click)="isButtons = true">one</button>
  <button (click)="isButtons = true">two</button>
</div>

<!-- 第二组按钮，切换后展示 -->
<div *ngIf="isButtons">
  <button>three</button>
  <button>four</button>
</div>

TS代码（和你现在写的完全一致，不需要修改）

isButtons: boolean = false;

2. 逻辑抽离实现（有扩展需求场景）

HTML代码

<div *ngIf="!isButtons">
  <button (click)="toggleButtonGroup()">one</button>
  <button (click)="toggleButtonGroup()">two</button>
</div>

<div *ngIf="isButtons">
  <button>three</button>
  <button>four</button>
</div>

TS代码

isButtons: boolean = false;

toggleButtonGroup(): void {
  // 此处可添加任意附加业务逻辑，比如点击埋点、权限判断等
  this.isButtons = true;

  // 如果需要支持双向切换，改成 this.isButtons = !this.isButtons 即可
}

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