Angular4如何获取路由的完整URL？

嘿，我完全懂你想要拿到包含协议、域名、完整路径的URL的需求——this._router.url确实只能返回路由对应的路径部分，没法给到你完整的URL信息。这里有两个实用的方法可以帮你实现：

方法一：直接使用浏览器的window.location对象 #

这是最直接的方式，浏览器的location对象本身就包含了所有URL相关的信息：

// 直接获取完整URL
const fullUrl = window.location.href;

// 或者手动拼接各部分（适合需要自定义调整的场景）
const fullUrl = `${window.location.protocol}//${window.location.host}${this._router.url}`;

window.location.href会直接返回当前页面的完整URL，比如https://example.com/user/profile；而手动拼接的话，protocol是协议（比如https:），host是域名加端口（比如example.com或者localhost:4200），再加上路由路径，也能得到同样的结果。

方法二：使用Angular的DOCUMENT注入令牌（更符合Angular规范） #

如果你想遵循Angular的依赖注入原则，避免直接操作全局的window对象（比如在服务端渲染SSR场景下更安全），可以使用Angular提供的DOCUMENT令牌：

首先在组件/服务中导入相关依赖：

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';
import { Router } from '@angular/router';

然后在构造函数中注入DOCUMENT和Router：

constructor(
  @Inject(DOCUMENT) private document: Document,
  private _router: Router
) {}

接下来就能安全地获取完整URL了：

// 直接获取完整URL
const fullUrl = this.document.location.href;

// 或者手动拼接
const fullUrl = `${this.document.location.protocol}//${this.document.location.host}${this._router.url}`;

这两种方法都能帮你拿到包含协议、域名和完整路径的URL，根据你的项目场景选择就行～

内容的提问来源于stack exchange，提问作者r3plica