Question

当用户点击三个按钮之一时，我需要应用 Class active（默认情况下第一个按钮处于“active”状态）。

我该怎么做？

<button class="nav-link active" > one </button>
<button class="nav-link " > two </button>
<button class="nav-link " > three</button>

Answer 1

这是一个关于如何做的Stackblitz example，这是代码：

html：

<div *ngFor="let btn of buttonsData">
    <button class="nav-link" (click)="setActive(btn.id)">{{btn.label}}</button>
</div>

ts：

import {
  AfterViewInit,
  Component,
  ElementRef
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  constructor(private _elem: ElementRef) {}
  buttonsData = [
    { id: 0, label: "Link 1" },
    { id: 1, label: "Link 2" },
    { id: 2, label: "Link 3" }
  ];
  buttons;

  ngAfterViewInit() {
    this.buttons = this._elem.nativeElement.querySelectorAll(".nav-link");
    this.setActive(0);
  }

  setActive(id) {
    console.log(this.buttons[id]);
    this.buttons.forEach(btn => btn.classList.remove('active'));
    this.buttons[id].classList.add("active");
  }
}

CSS：

.active{
  background-color: red;
}

有了这个，您只需要在 buttonsData 中设置一个新项目，一切都是动态的。比我认为的硬编码示例要好得多。

您甚至可以删除 id 中的 buttonsData 值并简单地处理字符串数组并使用索引设置活动类。

Answer 2

您可以使用以下简单实现。

您的 html：

<button class="nav-link" [class.active]="isActiveFirst" (click)="isActiveFirst = true; isActiveSecond = false; isActiveThird = false"> one </button>
<button class="nav-link" [class.active]="isActiveSecond" (click)="isActiveFirst = false; isActiveSecond = true; isActiveThird = false"> two </button>
<button class="nav-link" [class.active]="isActiveThird" (click)="isActiveFirst = false; isActiveSecond = false; isActiveThird = true"> three</button>

你的 ts：

export class AppComponent  {
  isActiveFirst:boolean = true;
  isActiveSecond:boolean = false;
  isActiveThird:boolean = false;
}

满足条件时隐藏 UI 组件

2 个答案: