javascript - 底部的箭头表示 Angular 事件链接

Question

我正在 Angular 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，那么该特定链接必须处于事件状态，如果应用了事件类，那么我需要显示事件链接底部的箭头。

在这里，我无法获取所单击链接的事件类，而不是所有三个链接的事件类。

我对 Angular 非常陌生，因此如果其中遗漏了任何基本的东西，请帮助我。

我工作过的 stackblitz，

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

注意:其中不允许使用jquery。

Answer 1

您已经使用了 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