OnClick 使用 Angular 更改背景颜色

Posted 2023-03-13

【中文标题】OnClick 使用 Angular 更改背景颜色

【英文标题】：OnClick change the background color using Angular

【发布时间】：2019-06-27 23:39:25

【问题描述】：

当用户单击列表时，我有 ul 标记，背景颜色必须更改为其他颜色。我正在使用 Angular7，对此我很陌生。我怎样才能做到这一点。

html：

<ul class="horizontal" id="nav">
  <li><a class="active">Draft</a></li>
  <li><a>Planned</a></li>
  <li><a>Started</a></li>
  <li><a>Suspended</a></li>
  <li><a>Ended</a></li>
</ul>

css:

ul.horizontal li 
  float: left;


ul.horizontal 
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #E2E2E2;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;


ul.horizontal li a 
  color: #000;
  display: block;
  position: relative;
  line-height: 32px;
  padding: 0 16px 0 32px;
  white-space: nowrap;
  border-right: 1px solid #ccc;


ul.horizontal li a.active 
  background-color: #0275E7;
  color: #ffff;
  // background-color: rgb(201, 205, 248);

【问题讨论】：

您可以使用[ngClass] 来执行此操作。更多文档：***.com/questions/35269179/…

@Jacopo Sciampi onclick 我想改变颜色

你应该明白为什么，而不是在不了解原因的情况下复制解决方案。

【参考方案1】：

试试这个：

<ul class="horizontal" id="nav">
  <li 
    *ngFor="let state of states"
    (click)="setStateAsActive(state)">
    <a [class.active]="state === activeState">
       state 
    </a>
  </li>
</ul>

在你的 TS 课上：

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  activeState = 'Draft';

  states = [
    'Draft',
    'Planned',
    'Started',
    'Suspended',
    'Ended',
  ]

  setStateAsActive(state) 
    this.activeState = state;
  

---

这里有一个Working Sample StackBlitz 供您参考。