Angular 7:如何获取当前页面的完整URL

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1115)

如何在不使用角度7的情况下获取完整的当前URL window.location.href

例如,假设我当前的URL是 http://localhost:8080/p/drinks?q=cold&price=200

我怎样才能获得完整的URL而不仅仅是/p/drinks?q=cold&price=200

我试过this.router.url这个只给出/p/drinks?q=cold&price=200了完整的主机名。

我不想使用的window.location.href原因是它导致ng-toolkit / universal中的渲染问题

我试图遵循这个解决方案,这似乎与我一样,并且也更新了

如何在Angular2中获取服务的域名

这是我的代码

windowProvider.js

import { InjectionToken, FactoryProvider } from '@angular/core';

export const WINDOW = new InjectionToken<Window>('window');

const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: () => window
};

export const WINDOW_PROVIDERS = [
  windowProvider
];

app.module.ts中

@NgModule({
    .......
    providers:[
    .......
    windowProvider
   ]
})

在我要求的页面中:

import {WINDOW as WindowFactory} from '../../factory/windowProvider';
......
 constructor(private router: Router, private helper: Helpers,
             @Inject(WindowFactory) private windowFactory: any,
            ) {
console.warn('HELLO I M WINDOW FACTORY', this.windowFactory.location.hostname);
}

购买此产品在编译时会出错

./src/app/factory/windowProvider.js中的错误5:20模块解析失败:意外的令牌(5:20)您可能需要一个合适的加载器来处理此文件类型。| export const WINDOW = new InjectionToken('window'); | const windowProvider:FactoryProvider = {| 提供:WINDOW,| useFactory :()=> windowℹ「wdm」:编译失败。

任何人都可以告诉我如何解决这个问题。谢谢,

我关注的更多链接:

提问于
用户回答回答于

您尝试使用文档location.href

class SomeComponent {
  constructor(@Inject(DOCUMENT) document: any) {
  console.log(document.location.href);
}

热门问答

边缘计算机器 ECM 是裸金属还是虚拟机?

你好,ECM目前以提供虚拟机为主,后续可以同时提供容器。

对象存储通过直传首次上传成功后怎么使直传链接失效,防止重新上传?

可酷可乐

腾讯云 · 售后工程师 (已认证)

热爱云计算的小锅一枚。
推荐
从当前的签名机制上看,并不能做到使用后即失效。有两种方式可以降低风险。 1.在web直传模式中,需要向STS申请临时账号,临时账号生效的时间是由durationInSeconds参数控制,可以尽量缩短时间配置。 2.在申请STS时,需要设置policy,确保当前客户端只能上传到C...... 展开详请

API网关使用计划里的配额期限多久?

推荐已采纳

没有期限,比如绑定api维度,则说明这个api可以访问多少次,用完了会提醒

localhost可以访问9200端口,外网无法访问9200端口,安全组是启用的?

推荐
localhost指向的是服务器的IPv6地址哦。 如果你需要能直接通过服务区公网IP访问常用两种方法 1. 可以将本地服务地址设置为0.0.0.0:端口号; 2.通过nginx代理本地IP地址和端口,并将其指向localhost:你的端口号,具体配置详见:https://www...... 展开详请

通过自行开发web前端从物联网平台获取数据?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐
你们可以自行开发小程序或者服务端接受数据,物联网平台了相关的API接口: 1.服务端API接口:https://cloud.tencent.com/document/product/1081/34957 2.应用端API接口:https://cloud.tencent.com/d...... 展开详请

移动直播iOS端SDK使用动效触发filepath must not be nil相关crash?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
移动直播TXLiteAVSDK_Enterprise_iOS在6.8及之后的版本,动效资源有改动,如果新版本还是用之前老的版本的动效资源就会导致该crash问题。参考集成文档重新导入一下动效资源即可:https://cloud.tencent.com/document/produ...... 展开详请

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动