Question

我正在用角度6制作应用程序，并且我在引导程序链接中使用引导导航栏，

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>

在这里，我需要获取所单击链接的活动类，例如，如果我单击链接Product，则该特定链接必须处于活动状态，如果应用了活动类，则需要在以下位置显示箭头活动链接的底部。

在这里，我无法获得所单击链接的活动类，而无法获得所有三个链接。

我在棱角方面非常新，因此如果有任何基本知识遗漏，请帮忙。

我曾经工作过的堆叠闪电战，

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

您使用了看起来不错的routerLink和routerLinkActive指令。只需在模块中包括路由配置。

示例-

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

Answer 3

.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 ..的组件，并提供“ hightlight”样式。检查此https://angular.io/api/router/RouterLinkActive

Answer 4

这非常简单，因为您应该创建一个名为“ active”的类并在内部使用它。因此您的代码将如下所示：

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

只需创建一个活动的类名：

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

底部的箭头表示角度的活动链接

4 个答案: