Javascript 如何使用 TypeScript 在 Angular 2 的浏览器中获取当前 url？

How to get the current url in the browser in Angular 2 using TypeScript?

提问by Kevin

I need to get the current URL present in the browser in my Angular 2 application.

我需要在我的 Angular 2 应用程序的浏览器中获取当前 URL。

In JavaScript normally we do it using the window object.

在 JavaScript 中，我们通常使用 window 对象来实现。

How can I do this in Angular 2 using TypeScript?

如何使用 TypeScript 在 Angular 2 中执行此操作？

Thanks.

谢谢。

回答by JayChase

This is late but I thought it was worth updating. As of Angular2 final release you can import DOCUMENT from @angular/common and use that to get to the location.

这已经晚了，但我认为值得更新。从 Angular2 最终版本开始，您可以从 @angular/common 导入 DOCUMENT 并使用它来到达该位置。

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

...

export class YourComponent {

    constructor(@Inject(DOCUMENT) private document: Document) { 
        console.log(this.document.location.href);
    }
}

回答by Florian Leitgeb

It is not necessary to import complicated packages or inject something. Just use the methods you can find on window.location!

没有必要导入复杂的包或注入一些东西。只需使用您可以找到的方法window.location！

Such as:

如：

• window.location.hrefgives you the full URL
• window.location.hostnamegives you the host name
• window.location.originwith this command you get the host name with protocol (e.g. https://)
• and more as you can see here: click me

• window.location.href给你完整的 URL
• window.location.hostname给你主机名
• window.location.origin使用此命令，您可以获得带有协议的主机名（例如 https://）
• 以及更多，你可以在这里看到：点击我

For IE<=10 users: location.origin may not be available, then you have to use location.protocol + "//" + location.hostnameor use a polyfill or package like location-origin

对于 IE<=10 用户：location.origin 可能不可用，那么您必须使用location.protocol + "//" + location.hostname或使用 polyfill 或类似的包location-origin

回答by Günter Z?chbauer

You can

你可以

• inject Locationand get the URL by location.path()(see also Location and HashLocationStrategy stopped working in beta.16)
• get it from the browser directly using window.location.pathname

• 注入Location并获取 URL location.path()（另请参阅Location 和 HashLocationStrategy 在 beta.16 中停止工作）
• 直接使用从浏览器获取它 window.location.pathname

See also

也可以看看

How do I get the absolute path of the current page in Angular 2?

如何在 Angular 2 中获取当前页面的绝对路径？

回答by Ralph Lavelle

Import the ActivatedRoute, (and the rest of the Router stuff too, if you want)

导入 ActivatedRoute，（如果需要，也可以导入其余的路由器内容）

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

making sure it's injected into the constructor,

确保它被注入到构造函数中，

constructor(private route: ActivatedRoute) { ... }

and on ngOnInit you can use this.routeto inspect the URL. For instance, all the segments are in an array, which you can string together, as @ibgib suggested, like this:

在 ngOnInit 上，您可以this.route用来检查 URL。例如，所有段都在一个数组中，您可以按照@ibgib 的建议将其串在一起，如下所示：

let path = this.route.snapshot.url.join('/');

to give you something like "mars/moons/phobos".

给你一些类似“火星/卫星/火卫一”的东西。

回答by kbpontius

For future travelers, a lot of the other answers are great. Another option, if you want everything before the pathname (e.g. https://example.com) then you can use:

对于未来的旅行者，很多其他答案都很棒。另一种选择，如果您想要路径名之前的所有内容（例如https://example.com），那么您可以使用：

window.location.origin

window.location.origin

Here's a W3 article on the different window.locationproperties you can use: http://www.w3schools.com/js/js_window_location.asp

这是一篇关于window.location您可以使用的不同属性的 W3 文章：http: //www.w3schools.com/js/js_window_location.asp

Cheers!

干杯!

回答by JustLearning

This Linkhelped me:

这个链接帮助了我：

  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "host" in window.location) {
      return window.location.protocol + "//" + window.location.host + window.location.pathname;
    }
    return null;
}