Obtener la URL actual en Angular

Nuestros desarrolladores estrellas han agotado sus reservas de café, buscando a tiempo completo por la solución, hasta que Tomás halló el resultado en Gogs así que en este momento la compartimos con nosotros.

Solución:

Con JavaScript puro:

console.log(window.location.href)

Usando Angular:

this.router.url

import  Component  from '@angular/core';
import  Router  from '@angular/router';

@Component(
    template: 'The href is: href'
    /*
    Other component settings
    */
)
export class Component 
    public href: string = "";

    constructor(private router: Router) 

    ngOnInit() 
        this.href = this.router.url;
        console.log(this.router.url);
    

El plunkr está aquí: https://plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview

Puede hacer uso del servicio de ubicación disponible en @angular/common y, a través de este código a continuación, puede obtener la ubicación o la URL actual

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

@Component(
  selector: 'app-top-nav',
  templateUrl: './top-nav.component.html',
  styleUrls: ['./top-nav.component.scss']
)
export class TopNavComponent implements OnInit 

  route: string;

  constructor(location: Location, router: Router) 
    router.events.subscribe((val) => 
      if(location.path() != '')
        this.route = location.path();
       else 
        this.route = 'Home'
      
    );
  

  ngOnInit() 
  

aquí está el enlace de referencia desde donde he copiado para obtener la ubicación de mi proyecto. https://github.com/elliotforbes/angular-2-admin/blob/master/src/app/common/top-nav/top-nav.component.ts

otro.componente.ts

Así que la solución final correcta es:

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

/* 'router' it must be in small case */

    @Component(
      selector: 'app-other',
      templateUrl: './other.component.html',
      styleUrls: ['./other.component.css']
    )

    export class OtherComponent implements OnInit 

        public href: string = "";
        url: string = "asdf";

        constructor(private router : Router)  // make variable private so that it would be accessible through out the component

        ngOnInit() 
            this.href = this.router.url;
            console.log(this.router.url);
        
    

Al final de la artículo puedes encontrar las ilustraciones de otros administradores, tú también eres capaz dejar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador