Angular 6按钮组点击按钮切换primary/secondary颜色实现

这是个很常见的UI交互需求，咱们可以通过动态类绑定配合一个状态变量来轻松实现，步骤非常清晰：

第一步：在组件类中添加状态管理逻辑 #

首先在你的组件 .ts 文件里，定义一个变量来跟踪当前激活的按钮，同时修改每个按钮的点击方法，把激活状态同步过去：

export class YourComponent {
  // 用这个变量记录当前激活的按钮标识，默认激活"All"按钮
  activeFilter: string = 'all';
  searchTerm: string; // 假设你已经定义了这个搜索关键词变量

  performSearch(searchTerm: string) {
    this.activeFilter = 'all'; // 点击时标记当前按钮为激活状态
    // 这里保留你原来的搜索逻辑...
  }

  domainesFilter(searchTerm: string) {
    this.activeFilter = 'domaines';
    // 原来的Domaines过滤逻辑...
  }

  sectionsFilter(searchTerm: string) {
    this.activeFilter = 'sections';
    // 原来的Sections过滤逻辑...
  }

  groupsFilter(searchTerm: string) {
    this.activeFilter = 'groups';
    // 原来的Groups过滤逻辑...
  }

  documentFilter(searchTerm: string) {
    this.activeFilter = 'documents';
    // 原来的Documents过滤逻辑...
  }
}

第二步：修改模板，绑定动态类 #

接下来调整你的HTML模板，给每个按钮绑定动态样式类，根据activeFilter的值自动切换btn-primary和btn-secondary：

<div class="container">
  <div class="row">
    <div class="clearfix text-center" [hidden]="!searchTerm">
      <span class="inline">Filter results by :</span>
      <div class="float-right">
        <button type="submit" 
                [class.btn-primary]="activeFilter === 'all'"
                [class.btn-secondary]="activeFilter !== 'all'"
                (click)="performSearch(searchTerm)">All</button>
        
        <button type="submit" 
                [class.btn-primary]="activeFilter === 'domaines'"
                [class.btn-secondary]="activeFilter !== 'domaines'"
                (click)="domainesFilter(searchTerm)">Domaines</button>
        
        <button type="submit" 
                [class.btn-primary]="activeFilter === 'sections'"
                [class.btn-secondary]="activeFilter !== 'sections'"
                (click)="sectionsFilter(searchTerm)">Sections</button>
        
        <button type="submit" 
                [class.btn-primary]="activeFilter === 'groups'"
                [class.btn-secondary]="activeFilter !== 'groups'"
                (click)="groupsFilter(searchTerm)">Groups</button>
        
        <button type="submit" 
                [class.btn-primary]="activeFilter === 'documents'"
                [class.btn-secondary]="activeFilter !== 'documents'"
                (click)="documentFilter(searchTerm)">Documents</button>
      </div>
    </div>
  </div>
</div>

可选优化：用数组循环简化代码 #

如果以后可能需要新增更多过滤按钮，推荐把按钮数据抽象成数组，用*ngFor循环渲染，这样代码更简洁易维护：

组件类新增数组：

export class YourComponent {
  activeFilter: string = 'all';
  searchTerm: string;

  // 把所有按钮的配置存到数组里
  filterOptions = [
    { label: 'All', action: (term) => this.performSearch(term), key: 'all' },
    { label: 'Domaines', action: (term) => this.domainesFilter(term), key: 'domaines' },
    { label: 'Sections', action: (term) => this.sectionsFilter(term), key: 'sections' },
    { label: 'Groups', action: (term) => this.groupsFilter(term), key: 'groups' },
    { label: 'Documents', action: (term) => this.documentFilter(term), key: 'documents' }
  ];

  // 保留原来的过滤方法...
}

模板简化为：

<div class="float-right">
  <button type="submit" 
          *ngFor="let option of filterOptions"
          [class.btn-primary]="activeFilter === option.key"
          [class.btn-secondary]="activeFilter !== option.key"
          (click)="option.action(searchTerm)">{{ option.label }}</button>
</div>

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