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

Question

我希望通过添加和删除带 Angular 类来创建看起来像文件夹选项卡的导航链接。当链接处于事件状态时，它不会有底部边框，因此它看起来像是主选项卡。这是一个粗略的开始:

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

问题一:如何实现悬停指令？当鼠标悬停在

上时，我希望非事件链接变为灰色

问题 2:如何默认将“active-link”类添加到其中一个，以便在初始加载时它显示为事件(无底部边框)

到目前为止我有什么-

我的组件.html:

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

我的组件.css:

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;
}

还有我的 .ts 文件

export class AppComponent { 
  addClass(id: any) {
  this.id = id;
}
...

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

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

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>