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

Angular 5.0.4 -不支持queryParamsHandling的routerLinkActive

Angular 5.0.4是一个前端开发框架,它提供了一种结构化的方法来构建Web应用程序。它基于TypeScript编程语言,并且具有强大的工具和功能,使开发人员能够构建高性能、可扩展和可维护的应用程序。

在Angular 5.0.4中,routerLinkActive是一个指令,用于在当前活动路由和指定的路由之间切换CSS类。它允许我们根据当前路由的状态来动态添加或删除CSS类,以便在用户导航时应用不同的样式。

然而,Angular 5.0.4中的routerLinkActive指令不支持queryParamsHandling选项。queryParamsHandling是一个用于指定如何处理查询参数的选项,它可以有三个值:preserve、merge和null。

  • preserve:保留当前查询参数,不添加新的查询参数。
  • merge:合并当前查询参数和新的查询参数。
  • null:忽略当前查询参数,只使用新的查询参数。

由于Angular 5.0.4不支持queryParamsHandling选项,我们无法直接在routerLinkActive中使用它来处理查询参数。但是,我们可以通过其他方式来处理查询参数,例如使用ActivatedRoute服务来获取和处理查询参数,然后在组件中手动添加或删除CSS类。

对于Angular 5.0.4中不支持queryParamsHandling的routerLinkActive指令,我们可以考虑使用其他替代方案来处理查询参数,并根据需要手动添加或删除CSS类。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

前台源码 前言 1、本项目是基于之前文章续写。...用到了哪些 1、路由,子路由使用,引入——定义Routes——router-outlet——routerLink——routerLinkActive 2、(click)指令,绑定事件 3、[ngClass...]指令,绑定样式 安装 npm i --save @angular/router 官方网址:https://angular.io/guide/router 引入和使用 要使用路由,我们需要在 app.module.ts...修改菜单menu.component.html如下: routerLink 是路由地址,routerLinkActive作用是,当 a 元素对应路由处于激活状态时,weui-bar__item_on...不够后面我们用动态绑定class方法来代替routerLinkActive。 ? 这里写图片描述 二级路由(子路由使用) 我们当初设计统计有两个页面,按年统计,和按月统计。现在来完成这个。

1.4K30

教程|在 Angular 4 中加载功能模块(下)

从应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。...您下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。...现在检查执行 ng serve 命令后应用程序输出。您会看到两个针对 “chunk” 文件新行,它们是被 angular-cli 自动添加。这些行表示您惰性加载模块。...参见 Angular4PreLoadModules.zip 中示例应用程序,更详细地了解预加载。 自定义预加载:在大型应用程序中,仅预先加载少数惰性加载模块做法是比较合理。...请参见 Angular 文档 路由和导航 部分,了解如何自定义预加载配置。 结束语 加载时间是应用程序性能关键因素,它会影响应用程序用户体验。

2.3K10

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

一、Overview Angular 入坑记录笔记第五篇,因为一直在加班缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。...在 Angular 项目中,系统路由需要我们将一个 url 地址映射到一个展示组件,因此需要手动去设置 url 与组件之间映射关系 因为我们在使用 Angular CLI 创建项目时,选择了添加路由模组..." [routerLink]="[ '/news' ]" routerLinkActive="active"> News <a class...,因此,在我们定义 router-link 时,可以使用 routerLinkActive 属性绑定一个 css 样式类,当该链接对应路由处于激活状态时,则自动添加上指定样式类 ?...,Angular 会自动帮我们将这个参数对象与 url 进行拼接。

4.2K50

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

一、Overview Angular 入坑记录笔记第六篇,介绍 Angular 路由模块中关于路由守卫相关知识点,了解常用到路由守卫接口,知道如何通过实现路由守卫接口来实现特定功能需求,以及实现对于特性模块惰性加载...Angular Router Crisis Center...    Heroes <router-outlet...4.2、路由守卫 在 Angular 中,路由守卫主要可以解决以下问题 对于用户访问页面的权限校验(是否已经登录?已经登录角色是否有权限进入?)...在跳转到组件前获取某些必须数据 离开页面时,提示用户是否保存未提交修改 Angular 路由模块提供了如下几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址操作

3.7K30

用VSCode开发一个基于asp.net core 2.0sql server linux(docker)ng5bs4项目(2)

建立Angular5项目 按照第一部分操作安装好angular cli之后 (https://github.com/angular/angular-cli), 就可以打开命令行建立angular 客户端项目了...使用: ng new tv-client 创建一个名字为tv-clientangular项目. 此时, cli会通过npm自动安装依赖包. ...ts代码时, 由于安装了angular插件, 所以智能提示和自动补全和自动引用都是相当好....可以看到发生了错误404, angular客户端并没有找到这个api. 这是因为angular运行是自己web服务器端口4200, 而asp.net core也是运行自己服务器端口为5000....可以在angularserviceurl写成完整地址, 但是, 由于开发时和生产时api地址很有可能不一样, 那么这就意味着发布到正式环境之前要把所有servicesurl地址全部修改一遍,

2.4K50

Spring MVC 目录穿越漏洞(CVE-2018-1271)分析

Spring Framework版本5.0到5.0.4,4.3到4.3.14以及较旧不受支持版本允许应用程序配置Spring MVC以提供静态资源(例如CSS,JS,图像)。...当Spring MVC静态资源存放在Windows系统上时,攻击可以通过构造特殊URL导致目录遍历漏洞。 漏 洞 影 响 Spring Framework 5.0 to 5.0.4....Spring Framework 4.3 to 4.3.14 已不支持旧版本仍然受影响 漏 洞 利 用 条 件 Server运行于Windows系统上 要使用file协议打开资源文件目录...在Spring Framework 大于5.0.1版本(我测试环境5.0.4),双URL编码payload是不行,单次URL编码payload却是可以,这种情况下该漏洞就无法在Tomcat下触发了...漏 洞 修 复 Spring Framework 5.*(5.0到5.0.4)版本,建议更新到5.0.5版本 Spring Framework 4.3.*(4.3到4.3.14)版本,建议更新到4.3.15

3.2K20

.NET Core 3.0-preview3 发布

完整.NET Framework不支持.NET Standard 2.1。 F#4.6和dotnet fsi命令。可以使用F#4.6和dotnet fsi命令预览。FSI代表F#互动。...与谷歌一起构建gRPC是一种流行远程过程调用(RPC)框架。此版本ASP.NET Core在ASP.NET Core上引入了第一等gRPC支持。 Angular模板使用Angular 7....Angular SPA模板现在使用Angular 7,在第一次稳定释放之前,它将被Angular 8替换。 SPA-s身份验证。Microsoft通过此预览为单页应用程序添加了现成身份验证支持。...即使在不支持或不允许WebSocket环境中,SignalR Java客户端现在也可以使用。...关于Entity Framework Core 3.0消息并不多,但我们可以期待.NET Core下一个预览版本更新。

1.7K20

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

什么是angular-cli 简言之:就是NG团队自行维护一个项目脚手架[内置单元测试及webpack打包工具等],这货前身是ember-cli; 官网 / Github 吐槽 我最早是从Angular...cli beta18开始用,截止beta28.3,这个分支已经废弃,已经迁移,之前npm install angular-cli不推荐; 目前最新是v1.0.0正式版【2017-3-24】,从旧版本到...正式版配置稍微有些改动,我比较了下基本不大,放心使用 系统环境配置 window 安装lts版本nodejs v6.10.0 , Angular-cli中node-sass不支持7.x,装不上...有时候我们想要改源文件或者看到原始配置是怎么样这货就用到了 生成目录树小解释 总结 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了。...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持,现在不知道支不支持,写法如下 { "/": { "target

11810

Angular中sweetalert弹框使用详解

,但是只能用sweetalert中css,js必须通过npm下载sweetalert,引入下载sweetalert.min.js 二、版本说明 Angular V1.2.30 Angular-sweetalert...V1.0.4 Sweetalert V2.1.0 因为我们项目使用angular版本较低,所以相对应下载angular-sweetalert版本也低。...一定要注意版本,如果angular-sweetalert版本过高,所依赖文件angular版本过低,会导致引入报错。...三、引入文件 sweetalert/sweetalert.min.css angular/angular.min.js angular-sweetalert/SweetAlert.min.js sweetalert...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法在我用这个版本中是错误,我这个版本支持then(), 不支持直接在参数中写方法

2.7K40
领券