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

Question

我当前的网址是：

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

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

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

Answer 1

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"

Answer 2

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

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

Answer 3

如果您想从 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);

Answer 4

Mozilla 贡献者：

Location 接口表示它链接到的对象的位置（URL）。对它所做的更改会反映在与其相关的对象上。 Document 和 Window 界面都有这样一个链接的 Location，可以分别通过 Document.location 和 Window.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);
  }

谢谢。