首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

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

代码语言:txt
复制
<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.4K10
  • 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.3K60

    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.2K50

    浅谈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.2K40

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

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

    17.3K80

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

    // 表单相关的 'angular2/commom' => '@angular/forms' 三、新增NgModule 官方说明 Angular 模块能帮你把应用组织成多个内聚的功能块。...Angular 模块是带有 @NgModule 装饰器函数的。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...原因:angular(v4.1.1)中,需使用[ngStyle]属性方式对样式进行设置。 解决办法:1) 更改为[ngStyle]="{'color': someValidation ?...原因:webstorm里面默认启用”safe write”,保存先存到临时文件。...11.升级angular到(v4.1.1)版本后,等带动态src等属性触发error 原因:angular2启用安全无害化处理,防止XSS等攻击,具体可参考官方文档安全。

    8.2K00

    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.8K30

    Angular2 之 Animations

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

    1.9K10

    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代码 注意

    77730

    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.6K550

    angular基础面试题_java web面试题

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

    13K50

    【开发指南】(三)认识ionic3

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

    2.7K40

    按钮样式的正确方式

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

    3.6K20

    进阶 | 重新认识Angular

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

    2.6K10

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

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

    2.1K10
    领券