如何获得5角的基本网址？

Question

我当前的网址是http:// localhost:4200/test/dashboard.

我想使用angular 5功能打印基本网址,即http:// localhost:4200.

Answer 1

这里的其他答案涵盖了相当多的选择：

• location
• window.location
• document.location
• DOCUMENT / Document
• Location
• LocationStrategy
• PlatformLocation

TLDR；对于简单的情况，全局可用的 DOMlocation可能足以满足您的需求。但是，您可能真的想要一个 AngularLocation实例。而且，在某些情况下，LocationStrategy也可能有用。

您可以location直接访问 DOM ，无需导入任何内容：

foo(): void {
  console.log(location.origin);
  console.log(location.href);
  console.log(location.pathname);
}

如果您想使用 Angular Location，LocationStrategy那么您必须像这样将它们拉入：

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

constructor(private location: Location, private locationStrategy: LocationStrategy) { }

foo(): void {
  console.log(this.location.path());
  console.log(this.location.prepareExternalUrl('/'));
  console.log(this.locationStrategy.getBaseHref());
}

您可以使用prepareExternalUrl例如构造引用资产的 URL：

const url = this.location.prepareExternalUrl('assets/svg/icons.svg');

如果你下服务所有的东西直接/，有可能似乎不使用的角度是远点Location，但如果你设置你的应用程序的基本href是其他东西比/或者如果你有路径，然后做角更复杂的东西Location将帮助您正确处理此类事情。

如果prepareExternalUrl似乎没有获取您的基本 href，请参阅本答案末尾的相关说明。

在某些示例中，您会看到它声明您必须进行配置APP_BASE_HREF才能获取基本 href。情况不再如此，有关更多信息，请参阅此答案的结尾。

注意：默认情况下，Angular 使用位置策略，PathLocationStrategy但如果您更改了要使用的内容HashLocationStrategy那么prepareExternalUrl其他功能将不会以相同的方式工作。然而，如果你正在使用HashLocationStrategy你可能知道你在做什么，所以我不会在这里讨论这个。

完整的细节

让我们依次看看上面列出的每个实体。

1. location，window.location并且document.location是类型Location，直接从DOM来可以作为全局变量，也就是说你不必进口或注入他们以任何方式。

这些都是获得同一事物的方法。location并且window.location实际上是相同的东西（window可以显式地引用，但它也是隐式的 global this）。location并且document.location是基本相同的事情，看到这个SO答案关于此的更多细节。

您可以在Location 此处找到 MDN 文档。

因此，如果 DOMLocation是您想要的全部，我将只使用location. 有些人喜欢明确表示他们正在访问window对象并且更喜欢使用window.location. 该location领域document有一个混乱的历史，似乎是访问DOM是最流行的方式Location实例。

2.在其他地方，你可以看到人们DOCUMENT像这样使用 Angular 依赖注入令牌：

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

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

然后就可以访问了this.document.location。同样，这只是一个 DOMLocation实例，所以如果这是你想要的，当你可以直接访问它时，为什么还要注入它location呢？上面提到的this.document和全局可用的document都是类型Document，在浏览器上下文中，它们是同一回事。因此，您注入它的唯一原因是您在非浏览器环境中工作。

你可以找到的角文档，DOCUMENT 这里并为MDN文档Document 这里。

3.最后三个 Angular 实体 - Location,LocationStrategy和PlatformLocation。

令人困惑的是，Angular 对它们的位置类型（即Location）使用了与location上面的etc.类型相同的名称。DOMLocation是全局可用的，不需要导入，AngularLocation需要从@angular/common.

Angular 实体Location，LocationStrategy并且LocationStrategy彼此叠加， aLocation包含 a LocationStrategy， aLocationStrategy又包含 a PlatformLocation。它们都没有直接公开包含的实体，即您无法LocationStrategy通过LocationAPI 访问 ，也无法PlatformLocation通过LocationStrategy.

你会看到许多年长的例子直接访问PlatformLocation，但它的文档表明，这种“类应该不直接由应用程序开发者使用。”

结论

所以我们从一个令人困惑的实体数组开始，但最后，它实际上归结为在 DOM 提供的全局location对象和 Angular 提供的Location对象之间进行选择。在某些情况下，LocationStrategy也可能会引起兴趣。

代码

但是，如果您想获得更多的洞察力，为什么不尝试以下代码，该代码包含已提到的每个实体。查看控制台输出以了解每个实体提供的内容，然后尝试每个实体的 API。为简单起见，只需将此代码添加到现有组件之一：

import { Inject } from '@angular/core';
import { DOCUMENT, Location, LocationStrategy, PlatformLocation } from '@angular/common';

// Normally, you should not access PlatformLocation directly, it's just included here for completeness.
constructor(@Inject(DOCUMENT) private document: Document, private location: Location, private locationStrategy: LocationStrategy, private plaformLocation: PlatformLocation) { }

ngOnInit(): void {
    // These are just different ways to get the same thing, so if this
    // is what want, you might as well use plain location directly.
    console.log('DOM location', location)
    console.log('DOM window.location', window.location)
    console.log('DOM document.location', document.location)
    console.log('Injected document.location', this.document.location)

    // These are layered on top of each other. A Location contains a
    // LocationStrategy and a LocationStrategy contains a PlatformLocation.
    // Note that this.location, used here, is a different thing to plain location above.
    console.log('location', this.location)
    console.log('locationStrategy', this.locationStrategy)
    console.log('platformLocation', this.plaformLocation) // PlatformLocation "should not be used directly by an application developer."
}

在浏览器中打开您的应用程序并查看开发人员工具中的控制台输出，看看您是否找到了所需的内容。

注意：在 Angular 世界中，事情很快就会变得陈旧 - 以上所有内容都适用于 Angular 9。

基本 href 和 Location

如果您有一个没有路由的简单应用程序，并且您将 base href 设置为其他值，/那么您可能会发现诸如prepareExternalUrl无法将 base href 考虑在内的功能。出现这种情况，如果您还没有一个RouterModule在imports你的部分app.module.ts。无论出于何种原因，只有在导入了 a 时才能正确配置其底层的LocationStrategyand 。要解决此问题，只需添加以下内容：PlatformLocationLocationRouterModule

imports: [
  ...
  RouterModule.forRoot([]),
  ...
]

即使你没有指定路由，即传入 []，这将正确配置内容以将您的基本 href 考虑在内。

APP_BASE_HREF，PlatformLocation和Location

在某些示例中，您会看到它声明您必须显式配置APP_BASE_HREF才能获取基本 href。例如像这样app.module.ts：

providers: [{
  provide: APP_BASE_HREF,
  useFactory: (pl: PlatformLocation) => pl.getBaseHrefFromDOM(),
  deps: [PlatformLocation]
}]

这可能是必要在某一阶段，但当前的PathLocationStrategy代码做这个自动为您，也就是说，如果没有设置你APP_BASE_HREF那么它本身将检索使用基本href值getBaseHrefFromDOM()的方法PathLocationStrategy。您可以在此处的 constructor 逻辑中看到这一点PathLocationStrategy。

Answer 2

无需角度特定功能,window.location.origin将为您完成.

Answer 3

PlatformLocation提供有关URL的更多详细信息：

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

 constructor(platformLocation: PlatformLocation) {
  console.log((platformLocation as any).location);
  console.log((platformLocation as any).location.href);
  console.log((platformLocation as any).location.origin);
}

Answer 4

console.log（位置）;

console.log（location.href）;

获取基本网址： console.log(location.origin);

Answer 5

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


@Injectable()
export class SomeService {
  constructor(@Inject(DOCUMENT) private readonly document: any,
    private readonly locationStrategy: LocationStrategy) {}

  // for localhost: http://localhost:4200/someBaseHref
  getUrl(): string {
    return `${this.document.location.origin}/${this.locationStrategy.getBaseHref()}`
  }

}

Answer 6

这对我不起作用（Angular 7）：

this.location.path.name

但是我发现可以从文档中获取它：

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

constructor(@Inject(DOCUMENT) private document: Document) {
    const origin = this.document.location.origin;
}