在 Angular 中使用 routerLinkActive 设置链接样式

2020-06-26 08:00:00 · 飞浪

介绍当您的应用顶部导航栏中有多个链接时，最终用户必须能够区分他们选择的活动链接和非活动链接。这种区分可以通过以不同的颜色和样式显示活动链接来实现。在Angular中，您可以使用名为ro

介绍

当您的应用顶部导航栏中有多个链接时，最终用户必须能够区分他们选择的活动链接和非活动链接。这种区分可以通过以不同的颜色和样式显示活动链接来实现。在 Angular 中，您可以使用名为routerLinkActive的开箱即用指令来实现。

在本指南中，您将学习如何使用 routerLinkActive 指令以不同的颜色和样式显示活动链接。您将创建一个带有导航栏的演示应用程序，其中包含指向应用程序的两个路由的链接。要完成本指南，您必须具备以下条件：

节点-12.17.0
Angular CLI——9.0.2
Visual Studio Code - 1.45.1

入门

创建一个 Angular 项目

执行以下命令创建一个 Angular 项目。

ng 新主动路由演示

当提示向应用程序添加路由时，按“N”。
当提示选择样式表格式时，按“ENTER”。

在 Visual Studio Code 中打开生成的应用程序

单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
在文件对话框中，导航到生成应用程序的文件夹。
在此文件夹中，您应该看到一个名为active-route-demo的文件夹。选择此文件夹并在文件对话框中单击“打开” 。

设置项目

下一步是安装 Twitter Bootstrap 和 jQuery，并在项目中引用它们。

转到命令提示符并运行以下命令：

cd 主动路由演示

运行以下命令安装jquery：

npm 我 jquery

运行以下命令安装 Bootstrap：

npm 我 bootstrap

在 Visual Studio Code 中，打开文件angular.json。
在src/style.css之前的样式数组中添加以下行。

“node_modules/bootstrap/dist/css/bootstrap.min.css”，

在脚本数组中添加以下几行：

“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”

在 Visual Studio Code 中，打开文件src > index.html。
在第 10 行的 body 元素中，添加以下类：

类=“容器”

最终的代码看起来应该是这样的：

      <body class="container">  
<app-root></app-root>
</body>
    

现在项目已全部准备好，可以开发演示应用程序了。

设置路由

在 Visual Studio Code 中，打开文件src > app > app.module.ts，删除文件内容，然后添加以下代码。此代码导入 Angular 的路由器模块并创建一个路由数组，您将在其中保存所有应用程序路由。

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import {RouterModule, Routes} from '@angular/router';


const routes: Routes = [
];


@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

开发 Home 组件

在命令提示符中运行以下命令：

ng 生成组件主页

在 Visual Studio Code 中，打开文件src > app > home > home.component.html，删除文件内容，并添加以下代码：

      <h1>Home Component</h1>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. 
Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in 
est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. 
Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean 
pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc 
eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae 
justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
</pre>
    

开发关于我们的组件

在命令提示符中运行以下命令：

ng 生成关于我们的组件

在 Visual Studio Code 中，打开文件src > app > about-us > about-us.component.html，删除文件内容，并添加以下代码：

      <h1>About Us</h1>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. 
Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in 
est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. 
Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean 
pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc 
eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae 
justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
</pre>
    

开发导航栏

在命令提示符中运行以下命令：

ng 生成组件导航栏

在 Visual Studio Code 中，打开文件src > app > nav-bar > nav-bar.component.html，删除文件内容，然后添加以下代码。在此代码中，请注意routerLinkActive指令应用于锚点标记。此指令将 CSS 类作为参数，以不同的颜色和样式呈现链接。还请注意属性routerLinkActiveOptions 。此属性确保仅当路由与您之前在app.module.ts文件中声明的路由完全匹配时，路由才以不同的颜色显示。

      <nav class="navbar navbar-expand-sm bg-dark">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Router Outlet Demo</a>
        </li>
        <li class="nav-item">
            <a [routerLink]="['/home']" class="nav-link" routerLinkActive="active"
                [routerLinkActiveOptions]="{exact:true}">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a>
        </li>
    </ul>
</nav>
    

在 Visual Studio Code 中，打开文件src > app > nav-bar > nav-bar.component.css并添加以下代码：

      li > a.active { color: #F97924 }

设置路线

在 Visual Studio Code 中，打开文件src > app > app.module.ts。
在路线数组中，添加以下条目：

      {path:'home', component: HomeComponent},
{path:'about', component: AboutUsComponent}
    

使用 router-outlet 组件

在 Visual Studio Code 中，打开文件src > app > app.component.html，删除现有内容，并添加以下代码以将router-outlet组件添加到混合中，以便在其中呈现不同的路由。

      <app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
    

测试应用程序

您现在可以运行 RouterLinkActive 指令了。

在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：

服务

如果提示分享 Angular CLI 使用数据，请按“N”键表示不分享。
打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
请注意，导航栏中有两个链接：主页和关于。
单击“关于”链接，注意导航栏下方的显示发生变化，显示“关于我们”组件的 HTML 。
单击返回主页链接，注意导航栏下方的显示发生变化，显示主页组件的 HTML 。

结论

恭喜！您已经学会了如何使用 routerLinkActive 指令向用户显示活动链接。有关更多信息，请访问RouterLinkActive 指令。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中使用 routerLinkActive 设置链接样式

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NavBarComponent } from './nav-bar/nav-bar.component'; import {RouterModule, Routes} from '@angular/router'; const routes: Routes = [ ]; @NgModule({ declarations: [ AppComponent, NavBarComponent ], imports: [ BrowserModule, RouterModule.forRoot(routes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

<h1>Home Component</h1> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis. </pre>

<h1>About Us</h1> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis. </pre>

<nav class="navbar navbar-expand-sm bg-dark"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Router Outlet Demo</a> </li> <li class="nav-item"> <a [routerLink]="['/home']" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a> </li> </ul> </nav>