点击按钮时如何更改按钮的背景颜色？

Question

我从角度出发，正在与实习同事一起开发目录应用程序，这是我的问题：

我在菜单中有以下这些小按钮：

btn menu

我希望当我单击其按钮之一时，其背景将显示为橙色，例如：

btn color

picture acceuil

如您在这里看到的，我单击了主页按钮，它带我回到主页，而“主页”按钮的背景用橙色很好地着色。

现在，我希望当我单击在其背景上方显示的3个按钮之一时，显示为橙色，而在其背景前面选择的另一个按钮时，则显示为黑色，等等...

这是我component.html的代码：

<div class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="dropdown activ"><a class="dropdown-toggle" [routerLink]="['home']" class="active" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Accueil </a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i> recherche <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="element"><a [routerLink]="['nonRelationEntity']"><i class="fa fa-fw fa-angle-right "></i> entités sans relations</a></li>
        </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-book"></i> catalogue <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['entity']"><i class="fa fa-fw fa-angle-right "></i> entité</a></li>
                <li class="element"><a [routerLink]="['relation']"><i class="fa fa-fw fa-angle-right "></i> relation</a></li>
                <li class="element"><a [routerLink]="['gestionCatalogue']"><i class="fa fa-fw fa-angle-right "></i> gestion catalogue</a></li>
            </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-exchange-alt"></i> mapping <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['profileMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des profiles</a></li>
                <li class="element"><a [routerLink]="['profile']"><i class="fa fa-fw fa-angle-right "></i> profile</a></li>
                <li class="element"><a [routerLink]="['scopeMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des scopes</a></li>
                <li class="element"><a [routerLink]="['scope']"><i class="fa fa-fw fa-angle-right "></i> scope</a></li>
            </ul></li>
        <li *ngIf="edit" class="element"><a [routerLink]="['import']"><i class="fa fa-fw fa-arrow-alt-circle-up  "></i> import</a></li>
        <li class="element"><a [routerLink]="['export']"><i class="fa fa-fw fa-arrow-alt-circle-down  "></i> export</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cogs"></i> administration <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['catalog']"><i class="fa fa-fw fa-angle-right "></i> catalogue</a></li>
                <li class="element"><a [routerLink]="['mappingType']"><i class="fa fa-fw fa-angle-right "></i> type de mapping</a></li>
                <li class="element"><a [routerLink]="['mappingSystem']"><i class="fa fa-fw fa-angle-right "></i> système de mapping</a></li>
                <li class="element"><a [routerLink]="['entityType']"><i class="fa fa-fw fa-angle-right "></i> type d'entité</a></li>
                <li class="element"><a [routerLink]="['relationType']"><i class="fa fa-fw fa-angle-right "></i> type de relation</a></li>
                <li class="element"><a [routerLink]="['propertyType']"><i class="fa fa-fw fa-angle-right "></i> propriété</a></li>
                <li class="element"><a [routerLink]="['mappingContext']"><i class="fa fa-fw fa-angle-right "></i> contextes de mapping</a></li>         
                <li *ngIf="admin" class="element"><a [routerLink]="['users']"><i class="fa fa-fw fa-angle-right "></i> gestion des utilisateurs</a></li>
                <li class="element"><a [routerLink]="['version']"><i class="fa fa-fw fa-angle-right "></i> gestion de versions</a></li> 
            </ul>
        </li>
    </ul>
</div>

这是我的component.ts的代码：

import { Component } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
declare var $: any;

@Component({
    selector: 'side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.css']
})
export class sideMenuComponent {
    admin : boolean = false;
    edit : boolean = true;
    ngOnInit(){
        if(localStorage.getItem('role')=="ROLE_ADMIN"){
            this.admin = true;
        }
        if(localStorage.getItem('role')=="ROLE_VIEW"){
            this.edit = false;
        }
    }

    ngAfterViewInit() {
        $(document).on('click', '.element', function (e) {
            $('.element.activ').toggleClass('activ');
            $(this).toggleClass('activ');
        });

        $(document).on('click', '.sidebar-nav li a', function (e) {
            $('.element.activ').toggleClass('activ');
        });

        $(document).on('click', ':not(.sidebar-nav li.open a)', function (e) {
            e.stopPropagation();
        });
/* remove if classe is active */
        $('.nav a').on('click', function () {
            $('.nav').find('.activ').removeClass('activ');
        });
    }
}

这是我的CSS代码：

  /*.woll {
    margin-bottom: -21px;
}

.ssilka a{
    color:#0080C0;
}

.ssilka a:hover{
    color:#0080C0;
}

.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item:first-child{
    border-radius: 0;
}
.side-menu{
    width: 20%;
}*/
#sidebar-wrapper { 
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  background: #222;
  height: 100%;
  width: 180pt;
  left: 180pt;
  margin-left: -180pt;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index:-5;
}
#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}
#sidebar-wrapper.toggled{
    left:0;
}

.nav .open > a { background-color: transparent; }

.nav .open > a:hover { background-color: transparent; }

.nav .open > a:focus { background-color: transparent; }

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70pt;
  width: 180pt;
}

.sidebar-nav li {
  display: inline-block;
  line-height: 14pt;
  position: relative;
  width: 100%;
}

.sidebar-nav li:before {
  -moz-transition: width 0.2s ease-in;
  -ms-transition: width 0.2s ease-in;
  -webkit-transition: width 0.2s ease-in;
  background-color: #1c1c1c;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 3pt;
  z-index: -1;
}

/*.sidebar-nav li:first-child a {
  background-color: #222;
  color: #ffffff;
}*/

.sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(1).open, .sidebar-nav li:nth-child(1).activ { background-color: #F55000; }

.sidebar-nav li:nth-child(2):before, .sidebar-nav li:nth-child(2).open, .sidebar-nav li:nth-child(2).activ { background-color: #F6590D; }

.sidebar-nav li:nth-child(3):before, .sidebar-nav li:nth-child(3).open, .sidebar-nav li:nth-child(3).activ  { background-color: #F7621A; }

.sidebar-nav li:nth-child(4):before, .sidebar-nav li:nth-child(4).open, .sidebar-nav li:nth-child(4).activ  { background-color: #F86B27; }

.sidebar-nav li:nth-child(5):before, .sidebar-nav li:nth-child(5).open, .sidebar-nav li:nth-child(5).activ  { background-color: #F97435; }

.sidebar-nav li:nth-child(6):before, .sidebar-nav li:nth-child(6).open, .sidebar-nav li:nth-child(6).activ  { background-color: #FA7D42; }

.sidebar-nav li:nth-child(7):before, .sidebar-nav li:nth-child(7).open, .sidebar-nav li:nth-child(7).activ  { background-color: #FB864F; }

.sidebar-nav li:nth-child(8):before, .sidebar-nav li:nth-child(8).open, .sidebar-nav li:nth-child(8).activ  { background-color: #FC8F5D; }

.sidebar-nav li:nth-child(9):before, .sidebar-nav li:nth-child(9).open, .sidebar-nav li:nth-child(9).activ  { background-color: #FD986A; }

.sidebar-nav li:nth-child(10):before, .sidebar-nav li:nth-child(10).open, .sidebar-nav li:nth-child(10).activ  { background-color: #FEA177; }

.sidebar-nav li:nth-child(11):before, .sidebar-nav li:nth-child(11).open, .sidebar-nav li:nth-child(11).activ  { background-color: #FFAB85; }

.sidebar-nav li:hover:before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav li a {
  color: #dddddd;
  display: block;
  padding: 7pt 10pt 7pt 20pt;
  text-decoration: none;
}

.sidebar-nav li.open:hover before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav .dropdown-menu {
  background-color: #333;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.sidebar-nav .dropdown-menu li a{
  margin-left: 10pt;
}

.sidebar-nav li.open a, .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 14pt;
  height: 52pt;
  line-height: 30pt;
}

.caret{
    float: right;
}

问题在于此代码在导入和导出按钮上不起作用，我真的不知道它在哪里！

我期待您的回复！您的帮助将非常有用，如果我的问题很愚蠢，对不起，但我仍然只是这个框架的初学者。

在此先感谢您的答复！

Answer 1

在Angular中，有很多方法可以做到这一点。基本上，这只是状态控制。

在此示例中，我在类中使用属​​性，但是您也可以在对象或其他任何事物上使用属性（例如从函数返回类）。

不要使用jQuery

jQuery 很棒，但是在Angular中，不要这样做。 Angular提供了更好的方式来更新DOM，而无需重写Angular在OoTB上所做的一切。

您可以看到示例in Action here

但重要的部分：

<button type="button" [ngClass]="{'blue-button' : isBlue }" (click)='toggleButtonClass()'>Click Me</button>

一个带有click事件的按钮，以及一个基于布尔值状态的类。

按钮的一些CSS：

.blue-button {
 background-color:blue;
 color:white;
 }

最后是切换类的函数：

public toggleButtonClass(){
   this.isBlue = !this.isBlue;
}

此外，您还可以拥有“ Button”对象数组，例如：

export class Button implements IButton {
Text: string;
Value: string;
IsSelected?: boolean = false;
}

然后生成执行相同操作的控件：

<div *ngFor="let button of Buttons">
   <button type="button" 
      (click)="toggleSelectedButton(button)" 
      [ngClass]="{'blue-button' : button.IsSelected}">{{button.Text}}
   </button>
</div>

Answer 2

我建议您使用// Import useState import { useState } from 'react'; // Set your active and SetActive items const [active, setActive] = useState({}); {Object.values(equipment).map((item, i) => { return ( <IonItem key={item}> <IonLabel>{item}</IonLabel> <IonRadio mode="md" slot="start" value={item} checked={active.i || false} onClick={() => { // Set the specific Item to active setActive({i:!active.i}); }} /> </IonItem> ); })} 和HostListener，因此，您创建了一个指令，例如，它可以更改点击时的颜色，然后在需要的任何地方重复使用它。

请看一下这个例子

HostBinding

然后是html

  @Directive({
  selector: `[appHighlight]`
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer) { }

  @HostListener('document:click', ['$event'])
  handleClick(event: Event) {
    if (this.el.nativeElement.contains(event.target)) {
      this.highlight('yellow');
    } else {
      this.highlight(null);
    }
  }

  highlight(color) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

您可以在this page上找到有效的示例。