Angular 5:从 URL 获取主机名和应用程序名称

问题描述 投票:0回答:4

我当前的网址是:

https://localhost:8080/MyApp/manager/dashboard

在上面的网址中,我只想获取 https://localhost:8080/MyApp/ 部分。

有什么方法可以在不进行硬编码的情况下获取此内容吗?

javascript angular typescript angular5
4个回答
25
投票

window.location包含大量信息。假设网址是 https://example.com:80/a/b/c,您可以在 Angular 中轻松获取以下信息:

window.location.hostname = "example.com"
window.location.host = "example.com:80"
window.location.protocol = "https:"
window.location.port = "80"
window.location.pathname = "/a/b/c"
window.location.href     = "https://example.com:80/a/b/c"

15
投票

如果您只想获取域名和应用程序名称,请依赖路由器位置和窗口位置。

import { Location } from '@angular/common';

constructor(private loc: Location) {}

ngOnInit() {
  const angularRoute = this.loc.path();
  const url = window.location.href;

  const domainAndApp = url.replace(angularRoute, '');
}

0
投票

如果您想从 URL 获取主机名和端口名,那么您只需执行以下操作即可

console.log(location);

这将返回每个值的单独值。

host: "localhost:4200",
hostname: "localhost",
href: "http://localhost:4200/order-form/2",
origin: "http://localhost:4200",
pathname: "/order-form/2",
port: "4200",
protocol: "http:",

在你的情况下应该

console.log(location.origin);


0
投票

Mozilla 贡献者:

Location 接口表示它链接到的对象的位置(URL)。对它所做的更改会反映在与其相关的对象上。 Document 和 Window 界面都有这样一个链接的 Location,可以分别通过 Document.locationWindow.location 访问。

所以你可以这样做来生成你的网址:

import {DOCUMENT} from '@angular/common';

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

  ngOnInit(): void {
    const api_host = this.document.location.host;
    const url = `https://${api_host}/add-your-path`;
    console.log(url);
  }

谢谢。

© www.soinside.com 2019 - 2024. All rights reserved.