【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。

简介: 【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=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);
    });
  }
}

浏览器渲染效果


相关文章
|
14天前
|
测试技术
用navigator.sendBeacon完成网页埋点异步请求记录用户行为,当网页关闭的时候,依然后完美完成接口请求,不会因为浏览器关闭了被中断请求。
用navigator.sendBeacon完成网页埋点异步请求记录用户行为,当网页关闭的时候,依然后完美完成接口请求,不会因为浏览器关闭了被中断请求。
|
14天前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
68 0
|
14天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
73 0
|
14天前
|
编解码 测试技术 Python
【如何学习Python自动化测试】—— 浏览器操作
【如何学习Python自动化测试】—— 浏览器操作
|
14天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
16 0
|
14天前
|
Web App开发 Java 测试技术
《手把手教你》系列技巧篇(二十六)-java+ selenium自动化测试-浏览器操作(详细教程)
【4月更文挑战第18天】本文介绍了Web自动化中的浏览器操作,包括如何打开不同类型的浏览器(如IE、Chrome、Firefox),以及进行页面操作如打开URL、浏览器最大化、刷新、前进和后退。还展示了如何设置浏览器位置和大小,以及获取当前URL和标题。此外,提供了项目实战例子,演示了如何用Selenium实现打开浏览器、设置位置和大小、搜索并执行页面操作的过程。文章最后提到一些其他可用的方法,并鼓励读者继续学习自动化测试相关知识。
60 3
|
14天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
18 4
|
14天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
19 0
|
14天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
32 0
|
14天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
72 1

热门文章

最新文章