如何在angular 5中获取基本url？

我当前的url是

---

我想打印基本url，即使用角度5功能。

不需要角度特定功能，

窗口。位置。origin将为您完成此操作。
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);
}

控制台日志（位置）

console.log（location.href）

要获取基本url：
console.log（location.origin）
您可以从“通用”包导入“位置”：

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
  }

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/common”；/”导入{Location}
您可以尝试（可以获取当前位置的所有详细信息）

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

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

constructor(public location: Location) { }

但是这个.location.origin不适合我。所以我使用了这个.location.path.name

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

这对我不起作用（7）：

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

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

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

从'@angular/common'导入{DOCUMENT，LocationStrategy}；
@可注射（）
导出类服务{
构造函数（@Inject（DOCUMENT）私有只读文档：any，
专用只读locationStrategy:locationStrategy{}
//对于本地主机：http://localhost:4200/someBaseHref
getUrl（）：字符串{
返回`${this.document.location.origin}/${this.locationStrategy.getBaseHref（）}`
}
}
这里的其他答案涵盖了相当多的选项：


位置
窗口位置
document.location
文档
/
文档
位置
定位策略
PlatformLocation

TLDR对于简单的情况，全球可用的DOM
位置
可能足以满足您的需要。但是，您可能真的需要一个角度
位置
实例。而且，在某些情况下，
定位策略也可能有用

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

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

如果要使用角度
位置
和
位置策略
，则必须将它们按如下方式拉入：

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

您可以使用
prepareExternalLurl
来构建引用资产的URL：

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

如果您直接在
/
下提供所有服务，使用Angular
位置似乎没有多大意义，但如果您将应用程序的base href设置为除
/
之外的其他内容，或者如果您正在使用路径执行更复杂的操作，那么Angular
位置将帮助您正确处理此类事情

如果
prepareexternalur
似乎没有提高你的基本href，请参阅本答案末尾的注释

在一些示例中，您会看到它指出，您必须配置
APP\u BASE\u HREF
，以便能够获取您的BASE HREF。情况已经不是这样了，更多信息请参见本答案的结尾

注意：默认情况下，Angular使用位置策略
PathLocationStrategy
，但如果您已更改为使用
HashLocationStrategy
，则
prepareExternalUrl
和其他函数的工作方式将不同。但是，如果您使用的是
HashLocationStrategy
，那么您可能知道自己在做什么，所以我在这里不赘述

全部细节
让我们依次看看上面列出的每个实体

1.
location
、
window.location
和
document.location
属于
location
类型，直接来自DOM，可以作为全局变量使用，即不必以任何方式导入或注入它们

这些都是达到同一目标的方法<代码>位置
和
窗口。位置
在字面上是一样的（
窗口
可以显式引用，但它也是隐式全局
此
）<代码>位置
和
文档。位置
本质上是相同的，有关详细信息，请参阅此

您可以找到
位置
的MDN文档

因此，如果DOM
Location
就是您想要的，我就使用
Location
。有些人喜欢明确表示他们正在访问
窗口
对象，并且更喜欢使用
窗口.位置
。
文档
的
位置
字段有一段混乱的历史，似乎是访问DOM
位置
实例最不常用的方法

2。在其他地方，您可以看到人们使用角度依赖注入令牌
文档
如下：

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

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

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

您可以找到
文档
的角度文档和
文档
的MDN文档

3.最后是三个角度实体-，和

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

角度实体
Location
、
LocationStrategy
和
LocationStrategy
彼此层叠，一个
Location
包含一个
LocationStrategy
和一个

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

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

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

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."
}

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

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