web-dev-qa-db-fra.com

Comment obtenir l'URL actuelle dans le navigateur dans Angular 2 en utilisant TypeScript?

Je dois obtenir l'URL actuelle présente dans le navigateur dans mon application Angular 2.

En JavaScript, nous le faisons normalement en utilisant l'objet window.

Comment puis-je faire cela dans Angular 2 en utilisant TypeScript?

Merci.

javascripttypescriptangular
28
Kevin

C’est tard, mais j’ai pensé que cela valait la peine d’être mis à jour. À partir de la version finale d'Angular2, vous pouvez importer DOCUMENT à partir de @ angular/common et l'utiliser pour accéder à l'emplacement.

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

Il n'est pas nécessaire d'importer des packages compliqués ou d'injecter quelque chose. Utilisez simplement les méthodes que vous pouvez trouver sur window.location!

Tel que:

  • window.location.href vous donne l'URL complète
  • window.location.hostname vous donne le nom d'hôte
  • window.location.Originavec cette commande, vous obtenez le nom d'hôte avec le protocole (par exemple, https: //)
  • et plus comme vous pouvez le voir ici: cliquez-moi

Pour IE <= 10 utilisateurs: location.Origin peut ne pas être disponible, vous devez alors utiliser location.protocol + "//" + location.hostname ou utilisez un polyfill ou un paquet tel que location-Origin

20
Florian Leitgeb

Importez ActivatedRoute (et le reste du matériel du routeur également, si vous le souhaitez)

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

en s'assurant qu'il est injecté dans le constructeur,

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

et sur ngOnInit, vous pouvez utiliser this.route pour inspecter l'URL. Par exemple, tous les segments sont dans un tableau, que vous pouvez chaîner, comme suggéré par @ibgib, comme ceci:

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

pour vous donner quelque chose comme "mars/lunes/phobos".

5
Ralph Lavelle

Pour les futurs voyageurs, beaucoup d'autres réponses sont bonnes. Une autre option, si vous voulez tout avant le nom du chemin (par exemple, https://example.com) alors vous pouvez utiliser:

window.location.Origin

Voici un article de W3 sur les différents window.location propriétés que vous pouvez utiliser: http://www.w3schools.com/js/js_window_location.asp

À votre santé!

5
kbpontius

Vous pouvez

Voir également

Comment puis-je obtenir le chemin absolu de la page en cours en Angular 2?

5
Günter Zöchbauer

Ceci Lien m'a aidé à:

  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "Host" in window.location) {
      return window.location.protocol + "//" + window.location.Host + window.location.pathname;
    }
    return null;
}
4
JustLearning