如何获取角度5中的基本网址？

时间：2018-08-23 11:01:24

标签： angular angular5

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

我想使用角度5功能打印基本URL，即http://localhost:4200。

9 个答案:

答案 0 :(得分：12)

不需要角度特定的功能，window.location.origin会为您完成。

答案 1 :(得分：10)

这里的其他答案涵盖了很多选项：

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

TLDR; ；在简单情况下，全局可用的DOM location可能足以满足您的需求。但是，您可能确实希望有一个Angular Location实例。而且，在某些情况下，LocationStrategy也可能有用。

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

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

如果您要直接在/下提供所有内容，则使用Angular Location似乎没有什么意义，但是如果您已将应用程序的基本href设置为除/，或者如果您要使用路径执行更复杂的操作，那么Angular Location将帮助您正确处理此类事情。

如果prepareExternalUrl似乎没有使用您的基本href，请参阅此问题末尾的注释。

在某些示例中，您会看到它指出必须配置APP_BASE_HREF才能使基本的href生效。情况已不再如此，有关此问题的更多信息，请参见此问题的结尾。

注意：默认情况下，Angular使用位置策略PathLocationStrategy，但是如果您将内容更改为使用HashLocationStrategy，则prepareExternalUrl和其他功能将无法正常工作。但是，如果您使用的是HashLocationStrategy，那么您可能知道您在做什么，所以在这里我将不做讨论。

完整细节

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

1 。location，window.location和document.location的类型为Location，直接来自DOM，可以用作全局变量，也就是说，您不必以任何方式导入或注入它们。

所有这些都是达到同一目的的方法。 location和window.location实际上是同一件事（window可以显式引用，但它也是隐式全局this）。 location和document.location本质上是同一件事，请参见SO answer，以获取更多详细信息。

您可以找到Location here的MDN文档。

因此，如果您只需要DOM Location，我将只使用location。有些人喜欢明确表示他们正在访问window对象，而更喜欢使用window.location。 location的{​​{1}}字段具有令人困惑的历史，并且似乎是访问DOM document实例的最不流行的方法。

2。。在其他地方，您可以看到人们正在使用Angular依赖项注入令牌Location，如下所示：

DOCUMENT

然后，您可以访问import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; constructor(@Inject(DOCUMENT) private document: Document) 。同样，这只是一个DOM this.document.location实例，因此，如果您要使用它，当可以直接以Location的身份访问它时，为什么还要麻烦注入它呢？上面提到的location和全局可用的this.document都是document类型，在浏览器上下文中，它们是同一件事。因此，注入它的唯一原因是如果您在非浏览器环境中工作。

您可以找到Document here的Angular文档和DOCUMENT here的MDN文档。

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

令人困惑的是，Angular的位置类型（即Document）与上面的Location等使用相同的名称。 DOM location全局可用，不需要导入，而角度Location则需要从Location导入。

角度实体@angular/common，Location和LocationStrategy彼此叠置，LocationStrategy包含Location和{{1} }依次包含LocationStrategy。它们都没有直接公开所包含的实体，即，您无法通过LocationStrategy API进入PlatformLocation，也不能通过LocationStrategy进入Location。

您将看到许多直接访问PlatformLocation的较旧的示例，但正如其documentation所表明的那样，该类“ 不应由应用程序开发人员直接使用。” < / p>

结论

因此，我们从混乱的实体数组开始，但最后，实际上只是归结为在DOM提供的全局LocationStrategy对象和Angular提供的PlatformLocation对象之间进行选择。在某些情况下，location也可能很有趣。

代码

但是，如果您想获得更多的见识，为什么不尝试使用下面的代码来提取提到的每个实体。查看控制台输出，以查看每个实体提供的内容，并仅尝试每个实体的API。为简单起见，只需将此代码添加到您现有的组件之一中即可：

Location

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

注意：在Angular世界中，事情很快就变得过时了-上面的所有方法在Angular 9中都可以正常工作。

基本href和LocationStrategy

如果您有一个没有路由的简单应用程序，并且已将基本href设置为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." } 以外的其他值，那么您可能会发现Location之类的函数无法考虑基本href。如果您没有在/的{​​{1}}部分中加入prepareExternalUrl，则会发生这种情况。无论出于何种原因，只有导入RouterModule时，才正确配置imports和app.module.ts以下的LocationStrategy。要解决此问题，只需添加以下内容：

PlatformLocation

即使您未指定任何路由（即传入Location，这也可以正确配置内容，以考虑您的基本href。

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

在某些示例中，您会看到它表明必须显式配置APP_BASE_HREF才能使基本的href生效。例如。就像在PlatformLocation中一样：

Location

在某个阶段可能需要此 ，但是当前的APP_BASE_HREF代码会自动为您完成此操作，即，如果您未设置app.module.ts，则它将自己检索使用providers: [{ provide: APP_BASE_HREF, useFactory: (pl: PlatformLocation) => pl.getBaseHrefFromDOM(), deps: [PlatformLocation] }] 的{​​{1}}方法的基本href值。您可以在PathLocationStrategy的{​​{1}}逻辑中看到此here。

答案 2 :(得分：7)

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

答案 3 :(得分：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()}`
  }

}

答案 4 :(得分：4)

console.log（位置）;

console.log（location.href）;

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

答案 5 :(得分：1)

您可以从“通用”包中导入“位置”：

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; // <--- Here
import { Router } from '@angular/router';

@Component({
  selector: 'some-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class SomeComponent implements OnInit {

  constructor(location: Location) {}

  ngOnInit() {
        console.log(this.location.origin);  // <--- Use Here
  }

}

答案 6 :(得分：0)

  

您可以尝试（可以获取当前位置的所有详细信息）

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
 selector: 'some-component',
 templateUrl: './component.html',
 styleUrls: ['./component.scss']
})

export class SomeComponent implements OnInit {

 constructor(location: Location) {}

    ngOnInit() {
        console.log(this.location._platformStrategy._platformLocation.location);  
    }
}

答案 7 :(得分：0)

我已经使用了 Rotemya 的答案中的位置

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

constructor(public location: Location) { }

但是this.location.origin对我不起作用。所以我用过this.location.path.name 

 ngOnInit() {
        console.log(this.location.path.name);
  }

答案 8 :(得分：0)

这对我不起作用（角度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;
}
相关问题
最新问题