0

Necesito obtener la URL completa dentro de un componente de mi aplicación de Angular.

Por ejemplo, en un entorno de desarrollo mi aplicación corre en localhost:4200. Supongamos que he navegado a /home. Me gustaría obtener la URL completa, http://localhost:4200/home, desde el componente.

He intentado inyectar Routery Location:

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private location: Location
  ) {}

  ngOnInit() {
    console.log(this.location);
    console.log(this.router);
  }
}

Sin embargo con ellos solo puedo obtener rutas relativas (por ejempo, /home).

¿Alguna idea?

7
  • 1
    Veo que pones javascript, te sirve un script cortito de JS para obtenerla? si es así con window.location.href sacas la url entera. Commented el 29 mar. 2019 a las 10:58
  • 1
    @Emerita en este caso está programando con Angular, así que será mejor que mantenga como tal. Es mala práctica hacer algo fuera del entorno.
    – tevvek
    Commented el 29 mar. 2019 a las 10:59
  • 1
    Entonces elimina la etiqueta javascript de la pregunta, porque seguro que no soy el único que te pregunta lo mismo jejejejeje. Commented el 29 mar. 2019 a las 11:00
  • 1
    No entiendo porqué debería eliminarla... Angular es un framework Javascript, igual que muchos otros... A mi me sirvió para poder recibir la notificación.
    – tevvek
    Commented el 29 mar. 2019 a las 11:02
  • 2
    @dteterevkov Si sabes que tu aplicación siempre se va a ejecutar en un navegador normal, no hay nada malo en usar el objeto document, a veces con Angular pecamos de sobreingeniería Commented el 29 mar. 2019 a las 11:22

1 respuesta 1

2

Lo relacionado con las rutas se encuentra en el objeto location, pero en este caso, como digo en los comentarios, debes acceder a ella usando las herramientas que te proporciona Typescript y Angular.

Así que importas DOCUMENT, lo declaras, y ya puedes acceder a ello.

Para ver más acerca el objeto locationte recomiendo el siguiente link

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

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

    ngOnInit() {
    }
}
1
  • 1
    Gracias por la respuesta, muy interesante, no sabía que se podía importar document Commented el 29 mar. 2019 a las 11:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.