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

在angular 1.6中,当url params中包含'@‘符号时,我的页面会崩溃

在Angular 1.6中,当URL参数中包含'@'符号时,页面会崩溃的原因是因为'@'符号在URL中具有特殊含义,被视为分隔符。为了解决这个问题,可以使用Angular的内置服务$location来处理URL参数。

首先,需要在控制器中注入$location服务:

代码语言:txt
复制
app.controller('MyController', ['$scope', '$location', function($scope, $location) {
  // 控制器代码
}]);

然后,可以使用$location服务的search()方法来获取URL参数,并进行处理。在处理之前,可以使用encodeURIComponent()方法对参数进行编码,以确保特殊字符被正确处理:

代码语言:txt
复制
app.controller('MyController', ['$scope', '$location', function($scope, $location) {
  var params = $location.search();
  var paramWithAtSymbol = params.paramName; // 假设参数名为paramName

  // 对参数进行处理
  var decodedParam = decodeURIComponent(paramWithAtSymbol);

  // 其他逻辑
}]);

通过以上代码,可以获取包含'@'符号的URL参数,并对其进行处理,避免页面崩溃的问题。

关于Angular 1.6的更多信息,您可以参考腾讯云的AngularJS产品文档:AngularJS产品介绍

请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,以遵守您的要求。

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

相关·内容

react-03

SPA应用 单Web应用(single page web application,SPA) 整个应用只有一个完整页面 点击页面链接不会刷新页面, 本身也不会向服务器发请求 点击链接, 只会做页面的局部更新...path, 浏览器端前没有发送http请求, 但界面会更新显示对应组件 3....关于url# 1. 理解# '#'代表网页一个位置。其右面的字符,就是该位置标识符 改变#不触发网页重载 改变#会改变浏览器访问历史 2....相关API 1). react-router相关组件: Router: 路由器组件, 用来包含各个路由组件 Route: 路由组件, 注册路由 IndexRoute: 默认子路由组件 hashHistory...IndexRoute: 默认路由 父路由被请求, 默认就会请求此路由组件 5). hashHistory 用于Router组件history属性 作用: 为地址url生成?

2.4K30

使用Angular8和百度地图api开发《旅游清单》

大陆面主要展示你去过和即将要去路线,可以进行相关操作。...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面 DOM 连接起来。...class Storage {} ``` 复制代码 路由 Angular Router 模块提供了一个服务,它可以让你定义应用各个不同状态和视图层次结构之间导航要使用路径。...,这里用来做存储第三方组件位置,定义好之后app.module.ts引入: // material组件库 import { CustomMaterialModule } from '....如果想了解完整代码,欢迎github上查看。 接下来看看我大陆面,其实涉及难点不是很多,主要是根据hasDone为true或false去显示不同样式。

6K30
  • 深究AngularJS(3)——$res

    如果设置参数值是函数,那么该函数将在每次获取其值被执行(有那么点废话意思)。...对于设置没有出现在url模板(第一个参数)参数,将会以search query方式添加,例如: 如果url模板为/codingcool/:author,paramDefaults为{author...下面再来看一下$resource返回值: 返回值类型是对象,它包含了和指定服务api(即url)进行互动所有方法,默认会包含如下默认方法:  { 'get':    {method:'GET'},...http服务~ 异步请求成功,数据从服务器端取回后,被封装到一个$resource服务一个对象实例,这个对象可以被save,remove,delete方法直接操作,这种封装并提供简单CRUD操作方式...save(params, payload, successFn, errorFn); save方法会发起一个post请求,params参数用来填充url变量,对象payload会作为请求体进行发送

    1.1K10

    爬取豆瓣书单100本

    ,反反复复一直运行真的好不容易看来要多加练习,然鹅现在还要学习csv操作,唉,好难,一度崩溃想哭。...这是没翻页url: 这是翻了一url: 所以我们可以分析出,我们翻页,只有start参数发生变化,表示是从第几本开始书,第一从0开始,第二从第25本书开始(也就是说一面有...25本书)...后面也以此类推,因此我们可以用param将参数封装在字典里传入get方法,他会自动帮我们把这些参数放入url,拼接成图片中那种url。...,方便后面的使用 for page in range(0, 76, 25): # 获取page分别是0,25,50,75 刚好4个页面,100本书 # 这里参数会被传入到url params...=url, headers=headers, params=params).text 接下来就是重头。

    38110

    hash和history路由模式

    事件,可以event.state里获取 title:标题,基本没用,一般传 null url:设定新历史记录 url,新 url 与当前 url origin 必须是一样,否则会抛错,url...HTTP 请求,对服务端完全没有影响,因此改变 hash 不会重新加载页面 hash 模式下,仅 hash 符号之前内容会被包含在请求,如 http://website.com/#/login...只有#符号之前内容才会包含在请求中被发送到后端,也就是说就算后端没有对路由全覆盖,但是不会返回404错误 hash值改变,都会在浏览器访问历史增加一个记录,所以可以通过浏览器回退、前进按钮控制...单应用 当我们浏览器地址栏输入一个地址,浏览器就会去服务端去请求内容。但每次点击一个链接,就去服务端请求,这样会有页面加载等待。...后来慢慢就出现了单应用,第一次访问,就把 html 文件,以及其他静态资源都请求到了客户端。之后操作,只是利用 js 实现组件展示和隐藏。除非需要刷新数据,才会利用 ajax 去请求。

    19510

    使用 Angular Transfer State 一个具体例子

    我们有一个天气应用程序,在其侧边栏显示城市列表。 您单击城市名称,该应用程序会显示该城市的当前天气。...这些页面将包含浏览器应用程序,因此用户可以加载第一后使用 Angular 强大功能继续应用程序中导航。 您可以按照以下步骤尝试这个简单示例。...TransferState to the rescue Angular v5 引入 TransferState API 可以帮助解决这种情况。...它可以将数据从应用程序服务器端传输到浏览器应用程序。 为此,服务器应用程序将在它生成 HTML 页面添加我们要传输数据。 包含在此生成 HTML 页面浏览器应用程序将能够读取此数据。...,所以浏览器显示以下页面会调用onSerialize方法,但是这个方法没有效果,因为toJson只服务端调用。

    68000

    前端转鸿蒙必看篇:路由跳转

    Standard:多实例模式,也是默认情况下跳转模式。目标页面会被添加到页面栈顶,无论栈是否存在相同url页面。Single:单实例模式。...如果目标页面的url已经存在于页面栈,则会将离栈顶最近url页面移动到栈顶,该页面成为新建。如果目标页面的url页面栈不存在同url页面,则按照默认多实例模式进行跳转。...同时,需要保证每次只有一个主题切换页存在于页面栈返回直接回到设置。这种场景下,可以使用pushUrl()方法,并且使用Single实例模式。...,则可以调用Router模块方法,添加一个params属性,并指定一个对象作为参数。...= params.info as string; // 获取info属性值 } } ...}说明使用router.back()方法返回到指定页面,原栈顶页面(包括)到指定页面(不包括)

    13120

    Vue实现路由跳转传参

    # 符号hash 模式下,仅 hash 符号之前内容会被包含在请求,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由全覆盖,也不会返回 404 错误。...$route.params.idparams传参,如果没有路由规则定义参数,也是可以传过去,同时也能接收到,但是一旦刷新页面,这个参数就不存在了 新页面参数获取:通过$route.params....◼️ url地址显示与否:query更加类似于我们ajaxget传参,页面跳转之后页面 url面会拼接参数,类似?...params一旦设置路由,params就是路由一部分,如果这个路由有params传参,但是跳转时候没有传这个参数,会导致跳转失败或者页面会没有内容。...番外:带参数动态路由匹配动态路径参数,使用冒号 : 标记。比如,一个路由被匹配,它 params 值将在每个组件以 this.

    14610

    前端知识点总结vue篇(下)

    Vue,Angular,React前端三大框架巨头,重要性不用多说,不过目前项目开发主要用vue,现总结了一些Vue常用知识点。 1....(因为history模式改变URL方式会导致浏览器向服务器发送请求,因此要在服务器端 做处理,如果URL匹配不到任何静态资源,应该返回同一个index.html页面,这个页面就是app依赖页面,访问二级页面...b.假设首页进入详情,如果用户首页每次点击都是相同,那么详情就没必要重复请求,直接缓存起来。 如果点击不是同一个,则直接请求。...高 d.对应两个钩子函数 activated 和 deactivated ,组件被激活,触发钩子函数activated,组件被移除,触发钩子 函数 deactivated。...直白来说 query相当于get请求, 而params相当于post请求 24.vue set()方法 vue,当我们像对象添加属性,数据变化时,页面也要随着变化,这时用到set() set

    34820

    【路由】:路由那些事——上

    我们把页面间(即组件间)切换与浏览器地址栏 URL 变换关联起来(例如:根据浏览器地址栏变化切换页面),这就是前端路由。...路由基本原理 前端三杰 Angular、React、Vue 都推荐单页面应用 SPA 开发模式,它们都有自己前端路由解决方案: Angular:@angular/router React:react-router...Hash Hash —— 即地址栏 URL # 符号。路由里 # 我们称之为 hash。 ?...其右面的字符,就是该位置标识符。而且第一个 # 后面出现任何字符,都会被浏览器解读为位置标识符。 HTTP请求不包括 #。#是用来指导浏览器动作,对服务器端完全无用。...允许不刷新页面的前提下,通过脚本语言方式来进行页面上某块局部内容更新。这些方法通常与 window.onpopstate 配合使用。 示例: ? <!

    1.8K40

    HarmonyOS开发学习(1)–多页面开发

    单实例模式下:如果目标页面的url页面栈已经存在同url页面,离栈顶最近同url面会被移动到栈顶,移动后页面为新建,原来页面仍然存在栈,页面栈元素数量不变;如果目标页面的url页面栈不存在同...页面栈元素数量较大或者超过32,可以通过调用router.clear()方法清除页面栈所有历史页面,仅保留当前页面作为栈顶页面。...router.pushUrl({ url: 'pages/Second', params: { src: 'Index页面传来数据', } }, router.RouterMode.Single...与pushUrl()不同是,该方法会将目标页面替换当前页面,旧页面会被销毁: router.replaceUrl({ url: 'pages/Second', params: { src...Record)['src']; // 页面刷新展示 // ... } 页面返回和参数接收 我们可以调用router.back()方法来实现返回到上一个页面,同时也可以调用该方法增加可选

    18510

    angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

    使用 NG ZORRO 在上一篇文章,我们已经安装了NG ZORRO,并在跟模块引入了,子模块中使用还需要再次引入。...编辑layout模块header组件 layout.module.ts引入NG ZORRO import { NgZorroAntdModule } from 'ng-zorro-antd...展开二级菜单时候报错了 app.module.ts引用 import { BrowserAnimationsModule } from '@angular/platform-browser/...简单实现 添加点动画效果 定义两组动画:入场浮动动画,点击喜欢动画效果 share文件夹下添加一个动画效果文件animations.ts。...加入动画效果 有动画使用相关疑惑可以参考这篇文章及其相关文章:Angular练习之animations动画 源码下载 思考 angular模块,组件,普通ts文件之间关系和区别。

    1.6K30

    Angular路由实现原理

    基于hash通过将一个URL path部分用 # (Hash符号) 拆分。浏览器将 # 后面的部分视作虚拟片段。早期前端路由实现是基于 location.hash来实现。...他有如下特性:URL hash值改变不会被触发页面的重载。页面发送请求, hash 部分不会被发送。hash 值改变,会记录在浏览器历史记录,可使用浏览器“后退”,“前进”触发页面跳转。...监听hashchange事件,hash改变触发。并且页面打开也同样触发一次。<!...Angular路由实现已经了解了基本原理,那么Angular路由又是怎么实现呢。到github上下载了angular路由实现源码。...之前做过一个前端获取ip需求,封装getUserIP方法入参是一个回调函数,回调函数里调用navigate调用失败,后面也是通过设置ngZone.run()来解决,这下原理终于搞清楚了,原来是执行上下文问题

    79410

    【转载】【ionic+angularjs】angularjs ui-router路由简介

    有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...这个文件,且angular.min.js必须导入angular-ui-router.min.js前面。...通过views实现多视图 多个示图,使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大自由度。

    7.4K70

    Angular2学习记录-给后端程序员经验分享

    1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是学习基石,学习到东西都尽可能在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后维护.那么就要学习...,self并不受angular管理,导致刷新变量是selfisBackColor. 3.2http参数传递 按照下面代码传参数应该是没有问题,但是遇到了url被编码问题,例如输入`1111@qq.com...路由匹配规则是从根路由也就是forRoot()这个开始.该处匹配寻找规则....} 链接:http://domain/article/1 路由:[routerLink]="['article',article.id]"或者直接拼接url js获取:this.route.params...一系列方法,或者this.route.snapshot.params['id'] — 问号参数风格 配置:{path:'article',component:ArticleComponent} 链接

    3.1K20

    【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...这个文件,且angular.min.js必须导入angular-ui-router.min.js前面。...通过views实现多视图 多个示图,使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大自由度。

    7.3K40

    Angular核心-路由和导航

    中使用单应用步骤 (0.)准备整个应用需要路由组件 ng g component index ng g component product-list ng g component product-detail...-需要“路由器”服务 this.router.navigateByUrl('/plist') } 路由传参:实际应用在在商品详情查看某一个 路由词典:pdetail/:lid,包含可变参数...()函数里边实现读取当前路由地址参数: ngOnInit(): void { //组件初始化完成,读取路由参数,进而根据此参数做操作 //Observable对象必须订阅使用...= date['lid']; }) } 路由嵌套: 一级路由: index: 首页 user/center:用户中心 二级路由: user/center/info:用户中心》信息...视频播放,只能在学校内播放(客户ip地址限制) VIP学员视频播放,只能在13:30-22:00间播放… Angular提供了“路由守卫(Guard)”来访问路由组件前检查功能:如果检查通过(return

    2.2K20

    深入解析鸿蒙系统页面路由(Router)机制

    本文将深入探讨鸿蒙系统页面路由,揭示其工作原理、特点以及应用开发实际应用。1. 实现1.1....即如果目标url页面栈已经存在同url页面,则离栈顶最近url面会被移动到栈顶,并重新加载;如果目标url页面栈不存在同url页面,则按照标准模式跳转。2....页面路由工作原理鸿蒙系统页面路由基于一种轻量级栈式管理结构。每个页面都有一个唯一标识符,页面切换,页面路由根据标识符入栈或出栈,实现页面的切换和管理。3. 具体实现3.1....: 'pages/HomePage', params: { msg: 'hello world,是上一个页面传递过来' } }, router.RouterMode.Standard...:点赞,转发,有你们 『点赞和评论』,才是创造动力。

    49010
    领券