为什么Angular2 routerLinkActive将活动类设置为多个链接？

Angular2的routerLinkActive指令用于在当前活动路由链接上添加一个活动类。它允许我们在多个链接上设置活动类，以便在这些链接之间进行切换时，可以同时显示它们的活动状态。

为什么要将活动类设置为多个链接呢？这是因为在某些情况下，我们可能需要在同一时间内激活多个链接。例如，当我们有一个导航栏，其中的每个链接都对应着不同的功能模块或页面，而我们希望在用户访问某个功能模块或页面时，同时高亮显示该链接和当前活动链接。

通过将活动类设置为多个链接，我们可以轻松地实现这一目标。只要用户访问了其中一个链接，该链接就会被激活并显示活动状态，而其他链接则保持非活动状态。这样，用户就可以清楚地知道他们当前所在的功能模块或页面，并且可以方便地切换到其他功能模块或页面。

在Angular2中，我们可以使用routerLinkActive指令来实现这一功能。该指令可以通过一个字符串数组来接收多个链接，并在这些链接中的任何一个被激活时，添加一个活动类。例如，我们可以将routerLinkActive指令应用于导航栏中的多个链接，如下所示：

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

在上面的代码中，当用户访问"/home"、"/about"或"/contact"中的任何一个链接时，都会将活动类"active"添加到该链接上，从而高亮显示该链接。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod

相关·内容

AngularJS2.0 教程系列（一）

Why Angular2 Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。...快速变化的WEB 在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性，而这些特性将显著地改变JavaScript的开发体验...在这里，我们从angular2模块库中引入了三个类型： Component类、View类和bootstrap函数。 2....给一个类加注解，等同于设置这个类的annotations属性： //注解写法@Component({selector:"ez-app"}) class EzApp{...}...转发请赋原文链接：http://www.cnblogs.com/jasonnode/p/4666565.html

2.4K1 0

教程|在 Angular 4 中加载功能模块（下）

练习 2：惰性加载假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。...将 weather 和 currency 文件夹复制到您的主应用程序目录中，如下所示。图 8. 将辅助模块添加到主应用程序目录 ?...您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。...请注意，weather 模块的 loadChildren 属性被设置为 WeatherModule 的地址。...该地址是 WeatherModule 的文件位置（相对于应用程序根目录），后跟 # separator，再后面是已导出的模块类的名称 WeatherModule。

2.3K1 0

Angular4记账webApp练手项目之三（在angular4项目中使用路由router）

类将会自动添加到 a 元素上。...统计 app.component.html 修改如下： router-outlet为路由内容呈现的容器... 可以看出存在问题，进入时没有默认页面，必须点击后才会到对应页面，可以将路由中#改为空，可以实现默认进入记账页面...CountYearComponent } ] } ]; 添加count.component.html 当前记账金额为：...implements OnInit { activeIndex = 0; // 当前激活标记 constructor() { } ngOnInit() { } setActive(i) { // 设置标记

1.4K3 0

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在？Webpack 开发中间件模块热拔插（HMR）

多个月以来，我和多个Github上的社区贡献者一起建立支持库、包，我们最终的目的是希望完成这样一个作为起点的模板，也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中...快速构建：对于开发来说，你不需要再等待再每次更改之后，webpack去重新解析第三方代码，因为第三方类库将会独立到另外的一个bundle中，另外，超快速的构建包含了所有的map文件便于调试，再发布版本的文件中却将直接输出压缩版本...如果你倾向于React、React+Redux或者Knockout，我们也同样为他们提供了模板。...第一件事，虽然通常angular2运行在浏览器里，但是ASP.NET Core Server也可以让他运行在服务器端，所以它可以仅将HTML代码发送到浏览器，不需要javascript就可以显示内容。...意义并不在于让支持哪些不运行javascript的浏览器，它只是一种极端情况而已（如果为了这种极端情况，那还为什么要建立一个SPA应用呢？）

3.3K6 0

Angular 从入坑到挖坑 - Router 路由使用入门指北

url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组，因此我们可以直接在 app-routing.module.ts...属性绑定一个 css 的样式类，当该链接对应的路由处于激活状态时，则自动添加上指定的样式类 ?...同样的，我们也可以在 js 中完成路由的跳转，对于这种使用场景，我们需要在进行 js 跳转的组件类中通过构造函数依赖注入 Router 类，之后通过 Router 类的 navigate 方法完成路由的跳转...；对于可能存在的查询参数，我们需要定义一个 NavigationExtras 类型的变量来进行设置 import { Component, OnInit } from '@angular/core';...与使用 query 查询参数传递数据不同，此时需要将跳转的链接与对应的参数值组合成为一个数组参数进行传递 import { Component, OnInit } from '@angular/core

4.2K5 0

浅谈Hooks&&生命周期(2019-03-12)

生命周期现在流行的前端框架，无论是angular还是React，又或是Angular2以及以上，都由框架自身提供了生命周期（有的叫生命周期钩子）供开发者使用。...ngOnInit()在一个或多个数据绑定输入属性发生更改之前和之后调用。 ngOnInit() 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。...毕竟class类组件就是原生的class类写法。其实React内置了一个Component类，生命周期钩子都是从它这里来的，麻烦的地方就是每次都要继承。...Hooks React v16.7.0-alpha 中第一次引入了 Hooks 的概念， 为什么要引入这个东西呢？...你可以理解为会有一个槽去记录状态。正因为这个原因，Hooks，千万不要在 if 语句或者 for 循环语句中使用！

3.2K4 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

延迟加载通过将代码拆分成多个包并以按需加载的方式，来加速应用程序初始加载过程。每个Angular应用程序必须有一个叫AppModule的主模块。...将路由添加到顶层路由（app.routing.ts）并设置loadChildren。loadChildren会从根文件夹中获取绝对路径。...在子模块路由中，将路径指定为空字符串“”，也就是空路径。RouterModule.forChild会再次采用路由数组为子模块组件加载并配置路由器。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。...感兴趣的同学，可以尝试构建一个“答题系统应用程序”，具体要求为：有三个组成部分：测试视图、审查结果和显示结果接受json格式的提问问题，你可以以预定义的格式从服务器发送json，Angular2测试应用需要在客户端呈现出答题界面

17.3K8 0

Angular2 ：从 beta 到 release4.0 版本升级总结

8.1K0 0

AngularDart Material Design 输入顶

（输入类型“number”也使用materialNumberInputDirectives） multiple - 用户是否可以输入多个值，以逗号分隔。...如果此值是“list”或“both”，则inputAriaHasPopup应设置为“true”。...将此设置为true会更改行为，以便在更改选项或选项时： 1.选择中的第一个选定值在选项中有效 2.如果选择没有选定值，则选项中没有任何活动 inputText String...popupShadowCssClass String 建议弹出内容的自定义CSS类。 required bool 是否需要输入。...默认值为false。 selection SelectionModel 如果设置，自动建议将使用提供的可观察SelectionModel对象。

5.3K4 0

Angular 从入坑到挖坑 - 路由守卫连连看

四、Step by Step 4.1、基础准备重复上一篇笔记的内容，搭建一个包含路由配置的 Angualr 项目新建四个组件，分别对应于三个实际使用到的页面与一个设置为通配路由的 404 页面 --...="active">Crisis Center Heroes</...在 AuthGuard 这个路由守卫类中，我们模拟了是否允许访问一个路由地址的认证授权。...token 信息中包含 admin 即可访问 crisis-center 页面，在针对子路由进行认证授权的 canActivateChild 方法中，通过判断 token 信息是否为 admin-master...在上面的代码中，对于 CrisisModule 模块我们已经使用 CanActivate、CanActivateChild 路由守卫来进行路由的认证授权，但是当我们并没有权限访问该路由的权限，却依然点击了链接时

3.7K3 0

Angular2 之 Animations

Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。...需要定义一个动画触发器(triggerName)，在模板中使用[@triggerName]语法来把它附加到一个或多个元素上去。 triggerName设置成表达式，不同的状态，来定义动画状态。...'shown' : 'hidden'; } } 将动画改为关键帧，动画效果为下面： animations: [ trigger('visibilityChanged', [ transition...可以用三种方式定义持续时间：作为一个普通数字，以毫秒为单位，如：100 作为一个字符串，以毫秒为单位，如：'100ms' 作为一个字符串，以秒为单位，如：'0.1s' 延迟延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久...通过定义动画的关键帧，可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。每个关键帧都可以被指定一个偏移量，用来定义该关键帧将被用在动画期间的哪个时间点。

1.9K1 0

TypeScript入门教程（一）

本文是TypeScript的入门文章，将分别从下面四点对TypeScript进行介绍： 1，什么是TypeScript 2， 为什么要使用TypeScript 3，如何安装TypeScript，Webpack...TypeScript 登录TypeScript官网，TypeScript是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法，本质上是添加了可选的静态类型和基于类的面向对象编程...为什么要使用TypeScript 这里直接看下官网的总结： 1.png (1)TypeScript 是 JavaScript 的超集，任何现有的 JavaScript 程序可以不加改变的在 TypeScript...(2)可以在编译阶段就发现大部分错误; (3)更多的规则和类型限制，让代码预测性更高，可控性更高，易于维护和调试； (4)对模块、命名空间和面向对象的支持，更容易组织代码开发大型复杂程序； (5) Angular2...另外，tsc还可以支持一次编译多个文件，或者编译文件夹下的所有文件：一次编译多个文件： tsc 文件1 文件2 编译文件夹下所有ts文件： tsc *.ts 还可以监听文件的变化，使用--watch：

5.6K55 0

ECMAScript6基础学习教程（一）运行ES6代码

目前，浏览器JavaScript引擎还没有全盘支持ES6语法（Chrome情况会好些，但依旧没有支持所有的ES6新特性），所以，我们依旧需要使用ES6转码器，将ES6语法转为ES5语法，再在浏览器中运行...无论是React，亦或Vue，Angular2，无一例外的使用了Babel来支持ES6特性，通过webpack这个模块化和项目构建工具来编译ES6。...npm install --global babel-cli npm install --save babel-preset-es2015 在当前目录下新建配置文件.babelrc，该文件用于设置转码规则和插件...2.在浏览器中运行JS代码如果需要在浏览器中支持ES6语法，可以引入脚本转换器babel.min.js，以内联脚本或者外部文件链接方式运行： ......--外部文件链接--> //内联脚本，注意：需要定义type类型为“text/babel” //ES6代码注意

7483 0

angular基础面试题_java web面试题

angular用管道转换数据 Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。...angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。...在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180721.html原文链接：https://javaforall.cn

13K5 0

【开发指南】（三）认识ionic3

三者对比，原生开发性能高，但相应兼顾多个平台的开发成本、维护成本也高；加壳在线WebApp反之，开发方便但性能和功能有很大局限性；而混合式应用介于中间，兼具优缺点。...由于AngularJS 1.x版本在性能上已经很难有较大提升，后来微软和google联合推出了全新设计的基于TypeScript的Angular2，这是对于原始版本完全的重写。...typescript 新版的支持这一次的更新将提升typescript应用构建和类型检查的速度并且引入了对mix-in的支持等。...并且可以更轻松的在项目中设置延迟加载，设置延迟加载页面的优先级，并为每个页面自定义配置。...懒加载 Ionic3.0版本开始，支持了延迟加载，我们可以将某些模块设置为延时加载，只有用户打开相关的页面的时候，这个模块所在的js才会被下载，这样能减少用户初次下载的文件的大小。

2.7K4 0

angular5面试题_大数据面试题

angular2中有了Zone.js。...每个Angular应用程序只能有一个根模块(Root Module)，而它可以有一个或多个功能模块(Feature Module)。...同时，一个元素或组件，可以应用多个指令。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180660.html原文链接：https://javaforall.cn

4.3K2 0

按钮样式的正确方式

这种方法的缺点是，现在我们必须对所有按钮进行样式设置，否则用户将无法识别它们。...我们将这个组件称为.btn（就像Bootstrap一样，但我们只设置颜色和大小，以保持简单）。...浏览器为“focus”和“active”（即按下）状态设置了默认样式，但通过重置按钮样式我们已经删除了其中的一些。我们还希望为鼠标悬停设置样式，总体而言，我们希望可见的样式与我们的设计相匹配。...在多个浏览器中，当您单击链接或按钮时，将应用两个伪类： :active :focus 一旦停止按下鼠标按钮或触控板，“active”伪类就会停止应用。...它在整个页面上运行，并且仅在使用键盘时才将焦点可见的类设置为接收焦点的元素。

3.6K2 0

Angular 2 架构（下)

{{title}} 属性绑定: 把元素的属性设置为组件中属性的值。...指令是一个带有"指令元数据"的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上。...---- 服务(Services) Angular2中的服务是封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块。服务分为很多种，包括：值、函数，以及应用所需的特性。...例如，多个组件中出现了重复代码时，把重复代码提取到服务中实现代码复用。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

2.2K2 0

进阶 | 重新认识Angular

与此同时，指令、事件和插值等binder也同时完成了绑定，使得最终产生的Dom是与Model相维系的，即是活动的。 3....所以Dom-based的模板技术更像是一个数据与dom之间的“链接”和“改写”过程。...Angular 核心：使用脏检测（新/旧值比较）Diff 当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图 Zone.js（猴子补丁：运行时动态替换）将Javascript中异步任务包裹一层...模块修饰器修饰器（Decorator）是一个函数，用来修改类的行为。注意，修饰器（Decorator）并不是Typescript特性，而是ES6的特性。...依赖注入 Angular的依赖注入可谓是灵魂了，之前有篇详细讲这个的文章《谈谈Angular2中的依赖注入》。

2.6K1 0

为什么说Web开发和Vue.js是如此的有趣？

这不应该被理解为一篇关于为什么Vue.js可能比React，Angular或任何你正在考虑的其他Web框架更好的文章。Vuejs是令人惊叹的，但我们生活在一个作为前端开发人员同样令人惊叹的时代。...考虑到这些条件，React、Ember和Angular2 +是不可行的选项。我们没有认真考虑AngularJS（1）。...为什么是Vue.js，好玩吗？许多我所给的原因可以归因于Vue的替代品。模板最初使我对vue.js感兴趣的是模板。使用一些花括号，我可以根据JavaScript访问的变量将值插入到提交内容中。...学习如何将行为封装到组件中是很有趣的，它使我能够高效地分割代码。类似于生活在C #世界在哪里类需要做的太多了，我意识到当一个组件可能做的太多了。这种做法在某种程度上激发了智力，刺激了编程时的感觉。...从“= =”和“= = =”差异中体会函数处理类原型继承功能的编程方法，学习这种语言已经超好玩。能够将新的功能Babel到我的网站（项目）就更是屌爆了一样。

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云