app.component.html

【推荐使用】修改当前浏览器url路径，参数为多参数，并往所属平台（如浏览器）的历史堆栈中追加一个新条目



修改当前浏览器url参数为单参数，并替换所属平台（如浏览器）的历史堆栈的顶部条目



修改当前浏览器url路径，参数为多参数，并替换所属平台（如浏览器）的历史堆栈的顶部条目



【含hash的url】{ { path1 }}
【不含hash的url】{ { path2 }}
参数“a=1&b=2&c=3”前面加？

【返回值】{ { path3 }}
连接路径path1和path2

【返回值】{ { path4 }}
去掉“/a/b/c/”最后一个“/”

【返回值】{ { path5 }}
报告位置历史记录的当前状态
{ { state_str }}
对指定的路径进行标准化，并和当前的标准化路径进行比较

如果指定的 URL 路径和标准化之后的路径一样，则返回 true，否则返回false。【返回值】{ { isEqual }}
去掉“/api/path/”末尾斜杠

【返回值】{ { path6 }}
在“api/path/”前加斜杠

【返回值】{ { path7 }}
 前进 
 后退  
【监听路由变化】{ {url}}
【监听路由状态】{ {state}}

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);});}
}

 浏览器渲染效果