javascript - tutorial - ¿Cómo obtener la URL actual en el navegador en Angular 2 usando TypeScript?

install angular 2

Question

Necesito obtener la URL actual presente en el navegador en mi aplicación Angular 2.

En JavaScript normalmente lo hacemos usando el objeto ventana.

¿Cómo puedo hacer esto en Angular 2 usando TypeScript?

Gracias.

Answer 1

No es necesario importar paquetes complicados o inyectar algo. Simplemente use los métodos que puede encontrar en window.location !

Como:

• window.location.href te da la URL completa
• window.location.hostname te da el nombre de host
• window.location.origin con este comando se obtiene el nombre de host con protocolo (ej. https: //)
• y más como puedes ver aquí: haz clic en mí

Answer 2

Para los futuros viajeros, muchas de las otras respuestas son geniales. Otra opción, si quieres todo antes de la ruta (ej. https://example.com ), entonces puedes usar:

window.location.origin

Aquí hay un artículo de W3 sobre las diferentes propiedades de window.location que puede usar: http://www.w3schools.com/js/js_window_location.asp

¡Aclamaciones!

Answer 3

Usted puede

• Inyectar Location y obtener la URL por location.path() (ver también Location y HashLocationStrategy dejaron de funcionar en beta.16 )
• obténgalo del navegador directamente usando window.location.pathname

Ver también

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

Answer 4

Importe el ActivatedRoute, (y el resto del enrutador también, si lo desea)

import { ActivatedRoute, Params, Router, UrlSegment } from ''@angular/router'';

asegurándose de que se inyecta en el constructor,

constructor(private route: ActivatedRoute) { ... }

y en ngOnInit puede usar this.route para inspeccionar la URL. Por ejemplo, todos los segmentos están en una matriz, que puede encadenar, como lo sugirió @ibgib, así:

let path = this.route.snapshot.url.join(''/'');

para darle algo como "mars / moons / phobos".

Answer 5

Esto es tarde, pero pensé que valía la pena actualizarlo. A partir de la versión final de Angular2 puede importar DOCUMENT de @ angular / common y usar eso para llegar a la ubicación.

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

...

export class YourComponent {

    constructor(@Inject(DOCUMENT) private document: Document) { 
        console.log(this.document.location.href);
    }
}