【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxxparam2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
app.component.html
<button
(click)="location.go('api/path','?id=1&pageIndex=2&pageSize=10#hashValue2');path1 = location.path(true);path2 = location.path(false)
"
>
【推荐使用】修改当前浏览器url路径,参数为多参数,并往所属平台(如浏览器)的历史堆栈中追加一个新条目
</button>
<br>
<button(click)="location.replaceState('', 'id=1#hashValue1');path1 = location.path(true);path2 = location.path(false)"
>修改当前浏览器url参数为单参数,并替换所属平台(如浏览器)的历史堆栈的顶部条目
</button>
<br />
<button(click)="location.replaceState('api/path','?id=1&pageIndex=2&pageSize=10#hashValue2');path1 = location.path(true);path2 = location.path(false)"
>修改当前浏览器url路径,参数为多参数,并替换所属平台(如浏览器)的历史堆栈的顶部条目
</button>
<br />
<p style="color: red;">【含hash的url】{{ path1 }}</p>
<p style="color: red;">【不含hash的url】{{ path2 }}</p><hr /><button (click)="path3 = normalizeQueryParams('a=1&b=2&c=3')">参数“a=1&b=2&c=3”前面加?
</button>
<p>【返回值】{{ path3 }}</p><hr /><button (click)="path4 = joinWithSlash('path1', 'path2')">连接路径path1和path2
</button>
<p>【返回值】{{ path4 }}</p><hr /><button (click)="path5 = stripTrailingSlash('/a/b/c/')">去掉“/a/b/c/”最后一个“/”
</button>
<p>【返回值】{{ path5 }}</p><hr /><button (click)="state_str = getState()">报告位置历史记录的当前状态</button>
<p>{{ state_str }}</p><hr /><button(click)="isEqual = location.isCurrentPathEqualTo('/api/path','id=1&pageIndex=2&pageSize=10')"
>对指定的路径进行标准化,并和当前的标准化路径进行比较
</button>
<p>如果指定的 URL 路径和标准化之后的路径一样,则返回 true,否则返回false。【返回值】{{ isEqual }}
</p><hr /><button (click)="path6 = location.normalize('/api/path/')">去掉“/api/path/”末尾斜杠
</button>
<p>【返回值】{{ path6 }}</p><hr /><button (click)="path7 = location.prepareExternalUrl('api/path/')">在“api/path/”前加斜杠
</button>
<p>【返回值】{{ path7 }}</p><hr /><button (click)=" location.forward()"> 前进 </button>
<button (click)=" location.back()"> 后退 </button> <hr /><p style="color: green;">【监听路由变化】{{url}}</p>
<p style="color: green;">【监听路由状态】{{state}}</p>
app.component.ts
import { Component } from '@angular/core';
import {Location,LocationStrategy,PathLocationStrategy,
} from '@angular/common'; //引入获取、修改当前页面url相关参数的类@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],providers: [Location,{ provide: LocationStrategy, useClass: PathLocationStrategy },//引入获取、修改当前页面url相关参数的类],
})
export class AppComponent {constructor(public location: Location //引入获取、修改当前页面url相关参数的类) {}path1 = '';path2 = '';path3 = '';path4 = '';path5 = '';path6 = '';path7 = '';state_str: any = '';isEqual = false;url = '';state: any = '';// 静态方法----------------------------------------//给定 URL 参数字符串,如果需要则增加 '?' 前缀,否则原样返回。normalizeQueryParams(params: string) {return Location.normalizeQueryParams(params);}//给定 url 的两个部分,把它们连接(join)在一起,如有必要则添加一个斜杠。joinWithSlash(start: string, end: string) {return Location.joinWithSlash(start, end);}//如果 url 具有结尾斜杠,则移除它,否则原样返回。 该方法会查找第一个 #、? 之前的结尾 / 字符,之后的则不管。如果 url 中没有 #、?,则替换行尾的。stripTrailingSlash(url: string) {return Location.stripTrailingSlash(url);}// 方法----------------------------------------/*
this.location.path() //返回标准化之后的 URL 路径
// ----------------------------------------
path(includeHash: boolean = false): string
参数
includeHash boolean
路径中是否包含一个锚点片段(Anchor fragment)。可选. 默认值是 `false`.
返回值
标准化之后的 URL 路径。
*/// 报告位置历史记录的当前状态。getState() {return JSON.stringify(this.location.getState(), null, 2);}ngOnInit() {console.log(this.location);this.location.onUrlChange((url: string, state: unknown) => {(this.url = url), (this.state = JSON.stringify(state, null, 2));console.log(url, state);});}
}
浏览器渲染效果
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxxparam2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。相关推荐
- 父页面监听iframe路由变化_前端路由原理
对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理. 前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化.主要靠的就是hash和h ...
- vue3 实现监听store里state状态变化
vue3 实现监听store里state状态变化 import { watch } from "vue"; watch(() => store.state.currentDe ...
- Android Studio 基础 之 获取蓝牙Bluetooth 的状态,设置的蓝牙Bluetooth 的开关状态,并监听蓝牙Bluetooth 的状态变化方法整理
Android Studio 基础 之 获取蓝牙Bluetooth 的状态,设置的蓝牙Bluetooth 的开关状态,并监听蓝牙Bluetooth 的状态变化方法整理 目录 Android Studi ...
- Angular URL地址参数改变,视图不更新的解决办法(监听URL变化,重新加载数据方法)
import { ActivatedRoute,Router,NavigationEnd } from '@angular/router'; //钩子(组件组装完成之后调用的方法,仅调用一次)ngAf ...
- 微信小程序 监听手势滑动切换页面
1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bin ...
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- AndroidStudio实现简易android登录注册修改密码页面。
利用sqlite实现简易登录注册以及修改密码功能. 页面设计 登录页面activity_login.xml <?xml version="1.0" encoding=&quo ...
- 为什么火狐浏览器中点击按钮失效_各种浏览器审查、监听http头工具介绍
一.谷歌内置的审查工具(v17.0). 右键点击审查(Ctrl+Shirt+Alt) 浏览器下方会出现审查框,刷新网页 就会出现下图所示,先后点击"netword"-->在下 ...
- IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页 采取方法:采用onpopstate事件监听url改变,从而跳转到主页 遇到的问题:安卓上测试没问题:苹果手机 ...
最新文章
- 黑马程序员-张老师基础加强3-内省
- Spark详解(十):SparkShuffle机制原理分析
- jQuery操作DOM元素案例
- CentOS7.2中安装rabbitmq
- SpringBoot集成Cache缓存(Redis缓存,RedisTemplate方式)
- mysql5.7.23分区表_MySQL5.7.23 VS MySQL5.6.21 分区表性能对比测试
- 通达2017OA数据字典
- win10下安装numpy
- Abaqus设置初始地应力场
- 0基础参加数学建模,最大程度冲击奖项
- [计算机网络】【网络设备】VTP
- 联阳IT6561方案设计|替代IT6561方案DP转HDMI转换|CS5218替代IT6561芯片设计
- NYOJ 613免费馅饼
- WORD程序失去焦点再获得焦点后无法使用鼠标功能的解决办法(已解决)
- Sherman-Morrison-Woodbury,SMW恒等式
- 最新CCF会议|2022-2023顶会会议时间+投稿时间+官网链接(视觉+多媒体+数据挖掘+数据库+通用人工智能)
- 【渝粤题库】国家开放大学2021春2196社会调查研究与方法题目
- 上海海派艺术馆正式开馆
- REDIS上如何批量删除KEY?
- 如何将电脑上的资料和文件转移到另一台电脑上?
热门文章
- RabbitMQ学习笔记一:本地Windows环境安装RabbitMQ Server
- time 和 datetime 模块
- express中放置静态文件
- GitLab安装说明
- Be a person
- 携号转网:欢迎比阻挠更为有效
- java数据输入的步骤_Java学习日志1.4 Scanner 数据输入的三种方法
- python如何创建一个类_python (知识点:类)简单的创建一个类
- 计算机的网络端口管理器,Win7设备管理器没有端口选项的三大原因及解决措施...
- 掘金 php,PHP基本语法