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

Question

我基本上遇到了this问题，我需要引用当前使用渐变的路径，但还没有弄清楚如何将解决方案转换为Angular 2。

Answer 1

constructor(location:Location) {
  console.log(location.prepareExternalUrl(location.path()));
}

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor

window.location提供了更多信息

Plunker example

Answer 2

您可以使用DOCUMENT中的@angular/platform-browser注射。

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({...})
class SomeComponent {
  constructor(@Inject(DOCUMENT) document: any) {
    console.log(document.location.href);
  }
}

Answer 3

位置对象

document.location对象是您的一站式解决方案。

使用文档中位置对象内的属性以您需要的方式获取路径。让我们看一下这个例子。

对于 FILE HEADER VALUES 8664 machine (x64) D number of sections 5A3D287F time date stamp Fri Dec 22 18:45:03 2017 48F file pointer to symbol table 2D number of symbols 0 size of optional header 0 characteristics Summary F .data A0 .debug$S 2F .drectve 24 .pdata B9 .text$mn 18 .xdata

• https://www.google.com/images 将返回 document.location.href
• https://www.google.com/images 将返回 document.location.origin
• https://www.google.com 将返回 document.location.protocol
• https: 将返回 document.location.host
• google.com 将返回 document.location.hostname
• google 将返回 document.location.pathname

Answer 4

如果您重新加载页面，则无法通过Router或ActivatedRoute获取路径路径。 您应该使用window.location.pathname

Answer 5

具有基本href：

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

}