app.component.html

<button
(click)="location.go('api/path','?id=1&pageIndex=2&pageSize=10#hashValue2');path1 = location.path(true);path2 = location.path(false)
"
>
【推薦使用】修改當(dāng)前瀏覽器url路徑，參數(shù)為多參數(shù)，并往所屬平臺(tái)（如瀏覽器）的歷史堆棧中追加一個(gè)新條目
</button>
<br>
<button(click)="location.replaceState('', 'id=1#hashValue1');path1 = location.path(true);path2 = location.path(false)"
>修改當(dāng)前瀏覽器url參數(shù)為單參數(shù)，并替換所屬平臺(tái)（如瀏覽器）的歷史堆棧的頂部條目
</button>
<br />
<button(click)="location.replaceState('api/path','?id=1&pageIndex=2&pageSize=10#hashValue2');path1 = location.path(true);path2 = location.path(false)"
>修改當(dāng)前瀏覽器url路徑，參數(shù)為多參數(shù)，并替換所屬平臺(tái)（如瀏覽器）的歷史堆棧的頂部條目
</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')">參數(shù)“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/”最后一個(gè)“/”
</button>
<p>【返回值】{{ path5 }}</p><hr /><button (click)="state_str = getState()">報(bào)告位置歷史記錄的當(dāng)前狀態(tài)</button>
<p>{{ state_str }}</p><hr /><button(click)="isEqual = location.isCurrentPathEqualTo('/api/path','id=1&pageIndex=2&pageSize=10')"
>對(duì)指定的路徑進(jìn)行標(biāo)準(zhǔn)化，并和當(dāng)前的標(biāo)準(zhǔn)化路徑進(jìn)行比較
</button>
<p>如果指定的 URL 路徑和標(biāo)準(zhǔn)化之后的路徑一樣，則返回 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()"> 前進(jìn) </button>
<button (click)=" location.back()"> 后退 </button> <hr /><p style="color: green;">【監(jiān)聽路由變化】{{url}}</p>
<p style="color: green;">【監(jiān)聽路由狀態(tài)】{{state}}</p>

app.component.ts

import { Component } from '@angular/core';
import {Location,LocationStrategy,PathLocationStrategy,
} from '@angular/common'; //引入獲取、修改當(dāng)前頁(yè)面url相關(guān)參數(shù)的類@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],providers: [Location,{ provide: LocationStrategy, useClass: PathLocationStrategy },//引入獲取、修改當(dāng)前頁(yè)面url相關(guān)參數(shù)的類],
})
export class AppComponent {constructor(public location: Location //引入獲取、修改當(dāng)前頁(yè)面url相關(guān)參數(shù)的類) {}path1 = '';path2 = '';path3 = '';path4 = '';path5 = '';path6 = '';path7 = '';state_str: any = '';isEqual = false;url = '';state: any = '';// 靜態(tài)方法----------------------------------------//給定 URL 參數(shù)字符串，如果需要?jiǎng)t增加 '?' 前綴，否則原樣返回。normalizeQueryParams(params: string) {return Location.normalizeQueryParams(params);}//給定 url 的兩個(gè)部分，把它們連接（join）在一起，如有必要?jiǎng)t添加一個(gè)斜杠。joinWithSlash(start: string, end: string) {return Location.joinWithSlash(start, end);}//如果 url 具有結(jié)尾斜杠，則移除它，否則原樣返回。 該方法會(huì)查找第一個(gè) #、? 之前的結(jié)尾 / 字符，之后的則不管。如果 url 中沒有 #、?，則替換行尾的。stripTrailingSlash(url: string) {return Location.stripTrailingSlash(url);}// 方法----------------------------------------/*
this.location.path() //返回標(biāo)準(zhǔn)化之后的 URL 路徑
// ----------------------------------------
path(includeHash: boolean = false): string
參數(shù)
includeHash	boolean
路徑中是否包含一個(gè)錨點(diǎn)片段（Anchor fragment）。可選. 默認(rèn)值是 `false`.
返回值
標(biāo)準(zhǔn)化之后的 URL 路徑。
*/// 報(bào)告位置歷史記錄的當(dāng)前狀態(tài)。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);});}
}

?瀏覽器渲染效果

總結(jié)

以上是生活随笔為你收集整理的【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxxparam2=xxx参数（多用于通过浏览器地址参数保存用户当前操作状态的需求），实现监听url路由切换、状态变化。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。