单击角度按钮后如何更改按钮的颜色答案

【问题标题】：how to change color of button after clicking button in angular单击角度按钮后如何更改按钮的颜色
【发布时间】：2019-03-28 12:07:16
【问题描述】：

单击按钮后我需要将按钮颜色更改为红色（原色为红色），请帮助我单击按钮后如何更改颜色。

 <td>
      <button mat-icon-button color="primary">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

【问题讨论】：

标签： html angular angular6

【解决方案1】：

试试这个方法

// .ts file  
flag : any = false;

btnClick(){
    this.flag = true;
}

为颜色设置 css

::ng-deep .colorRed{
    color:red
}

在您的HTML 文件中

  // To apply color on row just put ngClass on tr  
  <tr [ngClass]="{ 'colorRed' :flag }">
    <td>
      <button mat-icon-button color="primary" (click)="btnClick()">
          <mat-icon>remove_circle</mat-icon>
       </button>
     </td>
  </tr>

【讨论】：

谢谢@sachin，但发生的事情意味着它应该只改变特定的选定颜色，但它正在改变完成的行颜色。你能帮我做这些吗？
@Richards 我已经更新了我的答案。请注意这一点。您只需在要设置的 tr 上应用类，如我的回答中所见。 :)

【解决方案2】：

由于您使用的是@angular/material，因此您应该绑定到其组件的颜色@Input，而不是仅仅添加您自己的css-class。

这样您就不必担心 css 优先级，并且您的代码不会因为组件颜色的 @angular/material 实现的变化而变得脆弱。

  <button mat-icon-button 
          [color]="buttonColor"
          (click)="buttonColor = 'warn'">
    <mat-icon>remove_circle</mat-icon>
  </button>

在你的组件中

   buttonColor: ThemePalette = 'primary';

如果您的警告颜色不是红色，请考虑更改您的主题或making a new theme。

【讨论】：

【解决方案3】：

在您的代码中实现此逻辑。

var isClicked = false;

.myClass{
  color : red;
}

<td>
      <button mat-icon-button color="primary" (click)="isClicked = !isClicked" [class.myClass]="isClicked">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

【讨论】：

@Richards，如果它适合您或需要进一步帮助，请告诉我 :)
谢谢@Harunur，我正在努力。 .myClass{ 颜色：红色；我可以在组件文件中使用这些吗？
把这个类放到你的component.css文件或者你想要的任何样式文件中。