angular2路由之routerLinkActive指令【推荐】

angular2的routerLinkActive指令在路由激活时添加样式class

.red{
 color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

当url是user或者/user/login的时候，a标签将会被加上classred。当url变化为别的时，class将会被移除。

如何添加两个class    

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

routerLinkActive的两种写法    

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>

也可以给routerLinkActive进行配置参数

传递exact: true表示路由完全匹配时才高亮，如

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

使用isActive检查当前是否路由处于激活状态

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>

如果当前路由处于激活状态，则会显示：login 激活

非激活状态

login 未激活

上述的 rla 为routerLinkActive缩写，它可以随便定义。

重点来了： 使用routerLink元素的父元素上使用RouterLinkActive指令

是不是给每个路由都分别添加样式好费事？给它父元素添加上路由高亮指令即可解决问题！

<div routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</div>

只要给a标签的父元素div添加上routerLinkActive和routerLinkActiveOptions， 当路由是/user/login或/user/reset时其所在dom元素分别被添加上red样式。 这里需要注意的是要添加上routerLinkActiveOptions指定完全匹配，不然会出现url为user时两个路由均被匹配上添加了red样式。

总结

以上所述是小编给大家介绍的angular2路由之routerLinkActive指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. 什么是路由守卫? Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate 控制是否允许进入路由. canActivateChild

  • angularjs路由传值$routeParams详解

    angularjs路由传值$routeParams详解

    AngularJS利用路由传值,供大家参考,具体内容如下 1.导包 <script src="angular.min.js"></script> <script src="angular-route.js"></script> 2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]); 3.配置路由 myapp.con

  • 详解Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im

  • 详解angular路由高亮之RouterLinkActive

    路由高亮是什么?有什么好处? 当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在dom元素会添加上样式表示当前是位置. 但是一刷新你会发现,这个样式没了... 怎么办? 采用路由高亮:当路由被激活时允许你添加一个class在你添加路由的dom元素上,只有url变化时才会移除此样式. 当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配. // 用法概览 @Directive({ selector: '[routerLink

  • Angular学习教程之RouterLink花式跳转

    前言 除了使用Router的navigate()方法切换路由,Angular2还提供了一个指令用来 将一个DOM对象增强为路由入口: @View({ directives:[RouterOutlet,RouterLink] template : `<nav> <b router-link="video">video</b> | <b router-link="music">music</b> </na

  • 详解Angular4 路由设置相关

    1.路由相关配置 路由类设置 /*路由基本模型*/ /*导入RouterModule,Routes类型*/ import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from "./login/login.component"; /*定义路由const表示不可改变*/ const routers: Routes = [ /* path:字符串,表示默认登入, path为路径 /lo

  • angular2中router路由跳转navigate的使用与刷新页面问题详解

    本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍: 一.router.navigate的使用 navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo :

  • angular2路由之routerLinkActive指令【推荐】

    angular2的routerLinkActive指令在路由激活时添加样式class .red{ color: red; } <a routerLink="/user/login" routerLinkActive="red">login</a> 当url是user或者/user/login的时候,a标签将会被加上classred.当url变化为别的时,class将会被移除. 如何添加两个class    <a routerLink=&

  • 浅谈angular2路由预加载策略

    浅谈angular2路由预加载策略

    1.问题描述 在没有使路由懒加载的时候,第一次使用的时候加载特别慢,影响用户体验,angular2可以使用loadChildren进行懒加载,第一次使用的时候只会加载需要的模块,其它模块在真正使用的时候才会去加载,这个时候打开浏览器控制台查看js加载的时候,会发现你在使用时候会去加载对应的js,导致第一次点击相应模块的功能时会卡顿一下,后面在使用就不会了,这样还是用户体验不好,接下来告诉你如果使用预加载策略解决这个问题. 2.预加载策略 RouterModule.forRoot的第二个添加了一个

  • Angular2利用组件与指令实现图片轮播组件

    Angular2利用组件与指令实现图片轮播组件

    前言 如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件 结束上文

  • Angular2 路由问题修复详解

    Angular2 路由问题修复详解

    Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介绍一下测试代码的组织结构, 其中包含两个组件:button.accordion.这个例子采用的是ng2-bootstrap. 我展示一下路由配置: /** * Created by guozhiqi on 2017/2/24. */ import {Route,Routes}from '@angul

  • angular2路由切换改变页面title的示例代码

    angular2里默认切换路由或者切换组件,页面的title是不会变化的. angular2在路由设置里提供了data参数可以传值,如下 { path: 'home', component: HomeComponent, data: { title: 'Home', aaa: 'aaaa', bbb: 'bbbb', ccc: "cccc"} } path和component是常用的属性,path是地址栏的显示,component是调用的组件. data则可以传数据,在组件内可以调用.

  • 详解Angular2 之 结构型指令

    详解Angular2 之 结构型指令

    Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构. Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令.是这三种指令中最常用的,我们会编写大量的组件来构建application. 属性型指令 属性型指令会修改元素的外观或者行为. e.g. NgStyle可以修改元素的好几个样式. 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局. 我们经常看到的内置的结构型指令有:ngIf.ngSwitch.ngFor. 下

  • Vue 嵌套路由使用总结（推荐）

    开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 需求场景 如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容 解决方案 使用动态路由 新建home.vue作为子页面组件 <template> <div> <h3>home Page</h3> <p>home page content</p> </div> <

  • Angular2 (RC4) 路由与导航详解

    基础知识 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素. 2.导入路由库 import { ROUTER_DIRECTIVES } from '@angular/router'; 3.配置 首选方案是用带"路由数组"的provideRouter工厂函数([provideRouter(routes)])来启动此应用. app.routes.ts import { provi

  • Angular2 (RC5) 路由与导航详解

    之前总结过RC4的路由配置,Angular2升级RC5之后增加了NgModule和RouterModule等等很多组件,所以现在的路由配置方式也变化比较大. 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下顶部添加一个<base>元素. 2.配置路由器 app.routing.ts import { Routes, RouterModule } from '@angular/router'; const appRoute

随机推荐