以角度获取路由 url - TypeScript

在 Angular 应用程序中，获取当前路由的 URL 是非常重要的。本文将向您展示如何使用 TypeScript 和 Angular 获取当前路由的 URL。

使用 ActivatedRoute 和 Router

要获取当前路由的 URL，我们可以使用 Angular 中的 ActivatedRoute 和 Router 服务。首先，我们需要注入 ActivatedRoute 和 Router 服务。

import { ActivatedRoute, Router } from '@angular/router';

constructor(private route: ActivatedRoute, private router: Router) {}

接下来，我们可以使用 ActivatedRoute 的 url 属性来获取当前路由的 URL。

const url = this.route.snapshot.url.join('/');
console.log(url);

注意，我们使用 join('/') 方法来将路由参数转换为字符串。如果当前路由没有任何参数，则 url 仅包含该路由的路径。

另外，我们可以使用 Router 的 url 属性获取整个应用程序的 URL，而不仅仅是当前路由的 URL。

const url = this.router.url;
console.log(url);

获取带查询参数的 URL

如果当前路由带有查询参数，我们可以使用 ActivatedRoute 的 queryParams 属性获取它们。查询参数是以键值对的形式出现的，并以问号（?）和 ampersand（&）分隔符分隔。

const queryParamMap = this.route.snapshot.queryParamMap;
const queryParams = {};
for (const [key, value] of queryParamMap.entries()) {
  queryParams[key] = value;
}
console.log(queryParams);

这将为我们提供包含查询参数的对象。例如，如果我们的应用程序的 URL 为 /users?name=John&age=25，我们将获得以下对象。

{
  name: 'John',
  age: '25'
}

我们可以将这些查询参数追加到当前路由的 URL 中，如下所示。

const urlWithQueryParams = this.router.createUrlTree([], {
  queryParams: queryParams,
  queryParamsHandling: 'merge',
  preserveFragment: true
}).toString();
console.log(urlWithQueryParams);

我们使用 createUrlTree() 方法创建 URL 树，然后使用 toString() 方法将其转换为字符串。请注意，我们配置了 queryParamsHandling 和 preserveFragment 选项，以确保我们的查询参数和片段保留在 URL 中。

结论

在本文中，我们学习了如何使用 ActivatedRoute 和 Router 服务来获取当前路由的 URL，以及如何获取带有查询参数的 URL。希望这篇文章能够帮助你更好地理解 Angular 中的路由。