Angular 4-如何使用ngClass添加和删除多个类？

Question

我想通过添加和删除带有角度的类来创建类似于文件夹选项卡的导航链接。链接处于活动状态时，它没有底边框，因此它似乎是主要标签。这是一个艰难的开始：

鉴于这些问题，如何正确使用[ngClass]向我的链接添加和删除类？

问题1：如何实现悬停指令？我希望将非活动链接悬停在

上时使其变灰

问题2：默认情况下如何向其中一个添加“ active-link”类，以便在初始加载时它显示为活动状态（无底边框）

我到目前为止所拥有的-

我的component.html：

const output = IOBuffer()

using REPL

const out_terminal = REPL.Terminals.TerminalBuffer(output)

const basic_repl = REPL.BasicREPL(out_terminal)

const basic_display = REPL.REPLDisplay(basic_repl)

Base.pushdisplay(basic_display)

using Plots, Measures
plotly()

data = [rand(100), rand(100)];

h = histogram(data, layout = 2,
          title = ["Dataset A" "Dataset B"], legend = false,
          ylabel = "ylabel", margin = 5mm)

display(h)

我的component.css：

<ul class="nav nav-tabs">
 <li [ngClass]="{'active-link': id === 1 }" id="1"(click)="addClass(id=1)" ><a [routerLink]="['']" data-toggle="tab">All Sites</a></li>
 <li [ngClass]="{'active-link': id === 2 }" id="2"(click)="addClass(id=2)"><a [routerLink]="['/sites/map']" data-toggle="tab">Sites Map</a></li>    
</ul>

对于我的.ts文件

li {
  display: inline;
  font-size: 150%;
}
.active-link {
  border-bottom: 1px solid black;
}
.nav li {
  border-radius: 3px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

我可以更改/添加什么代码以默认情况下干净地添加“活动链接”以及非活动链接的悬停指令？

谢谢！让我知道是否可以澄清

Answer 1

您可以拥有一个selectedTab之类的属性，这正是我猜测id在这里所做的事情。只要所有选项卡都具有未选择/无效的类别，并仅在selectedTab / id等于该选项卡ID的情况下应用有效类别，否则就不需要ngClass不需要它，您可以编写[class.active-link]="id === 1"，其中一个是链接ID。将变量id设置为ngOnInit中（或构造函数中或类中的默认值）的默认选项卡。如果我在这里想念什么，请告诉我。

关于您的悬停问题，How can I add a class to an element on hover?

.ts文件：

export class AppComponent {
  selectedTab = 0;

  constructor() {}
  // Function to select a tab.
  selectTab(tabId: number) {
    this.selectedTab = tabId;
  }
}

.html文件：

<ul class="nav nav-tabs">
 <li [class.active-link]="selectedTab === 0" (click)="selectTab(0)"><a data-toggle="tab">All Sites</a></li>
 <li [class.active-link]="selectedTab === 1" (click)="selectTab(1)"><a data-toggle="tab">All Sites</a></li>
</ul>