Comment obtenir l'url de base dans angular 5 ?

Question

Mon url actuel est http://localhost:4200/test/dashboard .

Je veux imprimer l'url de base c'est-à-dire http://localhost:4200 en utilisant les fonctionnalités d'Angular 5.

Answer 1

Pas besoin de fonctionnalités spécifiques à Angular, window.location.origin le fera pour vous.

Answer 2

Les autres réponses couvrent un large éventail de possibilités :

• location
• window.location
• document.location
• DOCUMENT / Document
• Location
• LocationStrategy
• PlatformLocation

TLDR ; pour les situations simples, le DOM globalement disponible location peut suffire à vos besoins. Toutefois, vous souhaitez probablement disposer d'une solution Angular Location instance. Et, dans certaines circonstances, LocationStrategy peut également être utile.

Vous pouvez accéder au DOM location directement sans avoir besoin d'importer quoi que ce soit :

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

Si vous souhaitez utiliser l'outil Angular Location y LocationStrategy puis tu dois les tirer comme ça :

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

Vous pouvez utiliser prepareExternalUrl pour, par exemple, construire des URL qui font référence à des actifs :

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

Si vous servez tout directement en dessous / il ne semble pas y avoir beaucoup d'intérêt à utiliser l'outil Angular Location mais si vous avez défini le href de base de votre application pour être autre chose que / ou si vous faites des choses plus compliquées avec des chemins, alors Angular Location vous aidera à travailler correctement avec ce genre de choses.

Si prepareExternalUrl ne semble pas capter votre href de base, voir les notes à ce sujet à la fin de cette réponse.

Dans certains exemples, il est indiqué qu'il faut configurer les éléments suivants APP_BASE_HREF pour que les choses reprennent votre base href. Ce n'est plus le cas, voir la fin de cette réponse pour en savoir plus.

Remarque : par défaut, Angular utilise la stratégie de localisation PathLocationStrategy mais si vous avez changé les choses pour utiliser HashLocationStrategy puis prepareExternalUrl et d'autres fonctions ne fonctionneront pas de la même manière. Cependant, si vous utilisez HashLocationStrategy vous savez probablement ce que vous faites, donc je ne vais pas m'étendre sur le sujet.

Tous les détails

Examinons tour à tour chacune des entités énumérées ci-dessus.

1. location , window.location y document.location sont de type Location proviennent directement du DOM et sont disponibles en tant que variables globales, c'est-à-dire que vous ne devez pas les importer ou les injecter de quelque manière que ce soit.

Ce sont toutes des façons d'arriver à la même chose. location y window.location sont littéralement la même chose ( window peut être mentionné explicitement mais c'est aussi le global implicite. this ). location y document.location son essentiellement la même chose, voir ceci Réponse SO pour plus de détails à ce sujet.

Vous pouvez trouver la documentation MDN pour Location aquí .

Ainsi, si le DOM Location est tout ce que vous voulez, j'utiliserais simplement location . Certaines personnes aiment être explicites sur le fait qu'elles accèdent à la base de données de l'UE. window et préfèrent utiliser window.location . El location domaine de document a une histoire confuse et semble être le moyen le moins populaire pour accéder à un DOM Location instance.

2. Ailleurs, vous pouvez voir des gens qui utilisent le jeton d'injection de dépendance d'Angular. DOCUMENT comme ça :

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

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

Ensuite, vous pouvez accéder this.document.location . Encore une fois, il s'agit simplement d'un DOM Location donc si c'est ce que vous voulez, pourquoi s'embêter à l'injecter alors que vous pouvez y accéder directement en tant que location ? Le site this.document et l'offre globale document mentionnés ci-dessus sont tous deux de type Document et, dans un contexte de navigateur, ils sont la même chose. La seule raison pour laquelle vous l'injecteriez serait si vous travaillez dans un contexte autre que celui d'un navigateur.

Vous pouvez trouver la documentation d'Angular pour DOCUMENT aquí et la documentation MDN pour Document aquí .

3. Enfin, trois entités Angular - Location , LocationStrategy y PlatformLocation .

Il est troublant de constater qu'Angular a utilisé le même nom pour son type d'emplacement (à savoir Location ) comme le type de location etc. ci-dessus. Le DOM Location est disponible globalement et n'a pas besoin d'être importé, le module Angular Location doit être importé de @angular/common .

Les entités Angular Location , LocationStrategy y LocationStrategy sont superposées, une Location contient un LocationStrategy et un LocationStrategy contient à son tour un PlatformLocation . Aucun d'entre eux n'expose directement l'entité contenue, c'est-à-dire qu'il n'est pas possible d'accéder à l'interface de l'entité. LocationStrategy via le Location ni à l'API PlatformLocation via le LocationStrategy .

Vous verrez de nombreux exemples plus anciens accéder directement à PlatformLocation mais comme son documentation indique clairement que cette "catégorie devrait no être utilisé directement par un développeur d'applications".

Conclusions

Nous avons donc commencé avec un éventail d'entités déroutant, mais en fin de compte, il suffit de choisir entre le DOM global fourni par l'UE et le DOM global. location et l'objet Angular fourni Location objet. Dans certaines circonstances, LocationStrategy peuvent également présenter un intérêt.

Code

Mais si vous voulez en savoir plus, pourquoi ne pas essayer le code suivant qui récupère toutes les entités mentionnées. Regardez la sortie de la console pour voir ce que chaque entité fournit et expérimentez simplement avec les API de chacune. Pour simplifier, il suffit d'ajouter ce code à l'un de vos composants existants :

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

Ouvrez votre application dans un navigateur et regardez la sortie de la console dans les outils de développement et voyez si vous trouvez ce que vous cherchez.

Remarque : les choses se périment rapidement dans le monde d'Angular - les éléments ci-dessus fonctionnaient tous parfaitement avec Angular 9.

Base href et Location

Si vous avez une application simple sans routes et que vous avez défini le href de base à autre chose que / alors vous pouvez constater que des fonctions comme prepareExternalUrl ne tiennent pas compte de la base href. Cela se produit si vous n'avez pas inclus un RouterModule dans le imports de votre app.module.ts . Pour une raison quelconque, le LocationStrategy y PlatformLocation qui sous-tendent Location ne sont correctement configurés que si un RouterModule est importé. Pour contourner ce problème, il suffit d'ajouter ce qui suit :

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

Même si vous n'avez pas spécifié de routes, c'est à dire que vous avez passé la commande [] Cela permettra de configurer correctement les choses pour prendre en compte votre href de base.

APP_BASE_HREF , PlatformLocation y Location

Dans certains exemples, vous verrez qu'il est indiqué que vous devez explicitement configurer APP_BASE_HREF pour que les choses reprennent votre base href. Par exemple, comme dans app.module.ts :

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

Ce site mai ont été nécessaires à un moment ou à un autre, mais l'actuelle PathLocationStrategy le code le fait automatiquement pour vous, c'est-à-dire que si vous n'avez pas défini APP_BASE_HREF alors il récupérera lui-même la valeur du href de base en utilisant la balise getBaseHrefFromDOM() méthode de PathLocationStrategy . Vous pouvez voir ceci aquí dans le constructor logique de PathLocationStrategy .

Answer 3

Console.log(emplacement) ;

console.log(location.href) ;

pour obtenir l'url de base : console.log(location.origin);

Answer 4

Cela ne fonctionne pas pour moi (Angular 7) :

this.location.path.name

Mais j'ai découvert qu'il est possible de l'obtenir à partir d'un document :

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

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

Answer 5

PlatformLocation fournit plus de détails sur l'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);
}