首页 文章

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

提问于
浏览 次
0

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

enter image description here

在给定这些问题的情况下，如何正确使用[ngClass]向我的链接添加和删除类？

问题1：如何实现悬停指令？我希望非活动链接在悬停时遮住灰色

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

我到目前为止 -

我的component.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>

我的component.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;
}
...

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

谢谢！如果我能澄清，请告诉我

javascript html css angular

1 回答

  • 2

    你可以拥有像 selectedTab 这样的房产，这就是我猜这里正在做的事情 . 只是让所有选项卡都有未选择/非活动类并且仅当 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>
    回复于

相关问题