角度如何单击按钮组内部按钮的颜色? [英] Angular How to toggle the color of a button which is inside a button group if it is clicked?

问题描述

我在角度6的组件中有一组按钮:

I have a group of buttons in an angular 6 component:

<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 btn-primary" (click)="performSearch(searchTerm)">All</button>
          <button type="submit" class="btn btn-secondary" (click)="domainesFilter(searchTerm)">Domaines</button>
          <button type="submit" class="btn btn-secondary" (click)="sectionsFilter(searchTerm)">Sections</button>
          <button type="submit" class="btn btn-secondary" (click)="groupsFilter(searchTerm)">Groups</button>
          <button type="submit" class="btn btn-secondary" (click)="documentFilter(searchTerm)">Documents</button>
     
        </div>
      </div>
    </div>
  </div>

如果要单击按钮，我想将其颜色更改为主要颜色，而将其他按钮的颜色设置为辅助颜色，我该如何实现?

I want to change the color of the button to primary if it is clicked and set the color of the other buttons to secondary, how can I achieve that?

推荐答案

您可以执行以下操作:

组件ts

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

  selBtn: string;

  constructor() { }

  ngOnInit() {
  }

  performA(): void {
    this.selBtn = 'a';
  }

  performB(): void {
    this.selBtn = 'b';
  }

  performC(): void {
    this.selBtn = 'c';
  }

  performD(): void {
    this.selBtn = 'd';
  }

  performE(): void {
    this.selBtn = 'e';
  }

}

模板

<div class="container">
  <div class="row">
    <div class="clearfix text-center">
      <span class="inline">Filter results by :</span>
      <div class="float-right">
        <button type="submit" class="btn {{ selBtn === 'a' ? 'btn-primary' : 'btn-secondary' }}" (click)="performA()">A</button>
        <button type="submit" class="btn {{ selBtn === 'b' ? 'btn-primary' : 'btn-secondary' }}" (click)="performB()">B</button>
        <button type="submit" class="btn {{ selBtn === 'c' ? 'btn-primary' : 'btn-secondary' }}" (click)="performC()">C</button>
        <button type="submit" class="btn {{ selBtn === 'd' ? 'btn-primary' : 'btn-secondary' }}" (click)="performD()">D</button>
        <button type="submit" class="btn {{ selBtn === 'e' ? 'btn-primary' : 'btn-secondary' }}" (click)="performE()">E</button>
      </div>
    </div>
  </div>
</div>

否则，您可以将.btn-secondary分配给所有按钮，然后仅在必要时才添加btn-primary，如下所示:

Otherwise you could assign .btn-secondary to all your buttons, then adding btn-primary only if necessary like this:

<button type="submit" class="btn btn-secondary" [ngClass]="{'btn-primary' : selBtn === 'e'}" (click)="performE()">E</button>

使用此解决方案，您可能需要调整CSS以确保btn-primary类覆盖btn-secondary类的所有属性

With this solution you may need to adjust your css to be sure that btn-primary class overrides all of the properties of btn-secondary class

这篇关于角度如何单击按钮组内部按钮的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！