¿Cómo obtengo la ruta absoluta de la página actual en Angular 2?

Question

Esencialmente me he encontrado con this problema, donde necesito una referencia a la ruta actual para usar gradientes, pero aún no he descubierto cómo traducir la solución a Angular 2.

Answer 1

Objeto de ubicación

El objeto document.location es su solución integral.

Use los atributos dentro del objeto de ubicación del documento para obtener la ruta de la manera que necesita. Veamos esto con un ejemplo.

Entonces, para https://www.google.com/images

• document.location.href devolverá https://www.google.com/images
• document.location.origin devolverá https://www.google.com
• document.location.protocol devolverá https:
• document.location.host devolverá google.com
• document.location.hostname devolverá google
• document.location.pathname devolverá /images

Answer 2

Puede usar la inyección de DOCUMENT de @angular/common .

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

Si vuelve a cargar la página, no puede obtener la ruta de la ruta por Router o ActivatedRoute. Debe usar window.location.pathname

Answer 4

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

https://angular.io/api/common/Location#prepareexternalurl

Como dice la documentación:

Normaliza una ruta de URL externa. Si la URL dada no comienza con una barra diagonal (''/''), agrega una antes de la normalización. Agrega un hash si HashLocationStrategy está en uso, o APP_BASE_HREF si PathLocationStrategy está en uso.

Significa que debe especificar explícitamente APP_BASE_HREF para obtener una ruta absoluta en Angular 5+.

window.location proporciona más información

Ejemplo de Plunker