angular 中活动 link 底部的箭头

Question

我正在 angular 6 中制作应用程序，我正在使用 bootstrap 导航栏作为路由器 links，

HTML,

<nav class="navbar navbar-expand-md bg-theme">
    <div class="container-fluid">
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav text-light">
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/home" class="nav-link text-capitalize theme-font-size-16" href="#">Dashboard</a>
                </li>
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/about" class="nav-link text-capitalize theme-font-size-16" href="#">Template</a>
                </li>
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/product" class="nav-link text-capitalize theme-font-size-16" href="#">Product</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="active"></div>

这里我需要获取被点击的 link 的活动 class，比如说如果我点击 link Product，那么那个特定的 link必须激活，如果应用了激活 class，那么我需要在激活 link.

的底部显示一个箭头

这里我无法获得点击的 link 的活动 class 而不是我拥有所有三个 link。

我是 angular 的新手，因此如果其中遗漏任何基本内容，请帮助我。

我工作过的stackblitz，

https://stackblitz.com/edit/angular-hhwx3j?file=src%2Fapp%2Fapp.component.html

注意：不能有jquery

Answer 1

您有一个用于激活路线的内置参数。 https://angular.io/api/router/RouterLinkActive 看看这个。

                <li class="nav-item" >
                <a routerLink="/home" routerLinkActive="active" class="nav-link text-capitalize theme-font-size-16" href="#">Dashboard</a> <-- use the routerLinkActive here and not on the li
            </li>

Answer 2

.ts 文件

let links = ['/home','/product','/sample'];

.html 文件

<li class="nav-item" *ngFor = "let item of links">
                    <a routerLink=item class="nav-link text-capitalize theme-font-size-16" routerLinkActive="highlight">{{item}}</a>
                </li>

必须在路由器中定义相应的 home、product.. 组件 module.and 为 "hightlight" 提供样式。检查这个 https://angular.io/api/router/RouterLinkActive

Answer 3

它非常简单，为此你应该创建一个 class 说 'active' 并在里面使用它。所以你的代码看起来像：

<li class="nav-item" >
 <a routerLink="/home" [routerLinkActive]="'active'" class="nav-link text-capitalize theme-font-size-16" href="#">Dashboard</a>
</li>

只需创建一个 class 名称 active :

.active{
border-bottom : 2px solid #095d82;
transition: ease-in-out 0.7s;
 }

Answer 4

您使用了 routerLink 和 routerLinkActive 指令，看起来不错。只需在 Module 中包含路由配置即可。

示例 -

const routes: Routes = [
  { path: 'LinkA', component: AComponent },
  { path: 'LinkB', component: BComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RootRoutingModule { }

工作演示副本在这里https://stackblitz.com/edit/angular-routerlinkactive-ebsmaz

angular 中活动 link 底部的箭头

Arrow at the bottom for active link in angular

javascript

angular

typescript

angular-routing

angular4-router