满足条件时隐藏 UI 个组件

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

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

你的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>

你的老师：

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

Answer 2

这里是 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 中设置一个新项目，一切都是动态的。我认为比硬编码示例好多了。

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

满足条件时隐藏 UI 个组件

Hiding UI components when a condition is met

javascript

angularjs

typescript

angular