Cómo obtener la ruta actual


472

Los documentos actuales solo hablan de obtener parámetros de ruta, no los segmentos de ruta reales.

Por ejemplo, si quiero encontrar el padre de la ruta actual, ¿cómo es eso posible?


25
window.location.pathname
dchacke

1
El problema con @dchacke window.locationes que si en el futuro quieren implementar la representación del lado del servidor, enfrentarán algunas dificultades ya windowque no existe en el servidor Node.js, pero necesitan usar los métodos estándar Angulares para acceder a la ruta y estarán bien tanto en el servidor como en el navegador.
Mohammad Kermani

Si, tiene sentido. Aquellos que usan o planean usar la representación del lado del servidor deben tener esto en cuenta.
Dchacke

Respuestas:


523

El nuevo enrutador V3 tiene una propiedad de URL.

this.router.url === '/login'

55
Uso este código y obtengo esta url en la variable de cadena, pero cuando intento imprimir en la consola .log no se imprime this.fullUrl = this.router.url console.log (this.fullUrl); // no imprime
vijay gupta

3
Mire el uso de la nueva función activa del enrutador <a routerLink="/dashboard" routerLinkActive="active"> Dashboard </a>
Victor96

34
esto es inútil cuando estás navegando con la estrategia Hash, la url siempre es "/"
Ninja Coding

55
@NinjaCoding Estoy usando la estrategia Hash y obtengo solo "/". ¿Cómo puedo obtener la ruta URL con Hash?
Murtuza

99
@Murtuza aquí es una solución: this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });. Asegúrese de importarimport { Router, NavigationEnd } from '@angular/router';
Gel

161

RC4 angular:

Puedes importar Routerdesde@angular/router

Luego inyectarlo:

constructor(private router: Router ) {

}

Luego llame a su parámetro de URL:

console.log(this.router.url); //  /routename

2
La claridad adicional sobre cómo importar el enrutador en sí es muy útil. ¿Podría aclarar si sería diferente si estuviera utilizando un enrutador personalizado?
kbpontius

1
Eso ciertamente dependería de la "personalización" del enrutador personalizado. (lo siento no era un comentario particularmente útil - si usted tiene una pregunta específica, sugeriría hacer una nueva pregunta y hacer referencia a esta respuesta)
lowcrawler

42
Usé esta solución, pero siempre obtengo este "/". ¿Alguien sabe por qué?
Marcio M.

44
La inyección de dependencia angular se basa en la sintaxis de Sugar TypeScript, por lo que cuando declara _router privado: Router en la firma del constructor, se crea automáticamente una propiedad _router en la instancia de clase actual con el Router inyectado. Esta declaración this.router = _router; es solo una sobrecarga para mí, ya que tendría dos referencias a la misma instancia de objeto (en ese caso, el enrutador).
Andrew Reborn

1
@Marcio M. Puede deberse a que el enrutador no ha alcanzado ese estado, aunque la URL se muestre diferente. Por ejemplo, si observa el router.url en un servicio de guardia. location.path () como se menciona en las respuestas le dará la URL, sin importar el estado del enrutador.
Daniel van Niekerk

61

Inyecte Locationen su componente y lea location.path(); Debe agregar en ROUTER_DIRECTIVESalgún lugar para que Angular pueda resolver Location. Necesita agregar import: [RouterModule]al módulo.

Actualizar

En el enrutador V3 (RC.3) puede inyectar ActivatedRoutey acceder a más detalles utilizando su snapshotpropiedad.

constructor(private route:ActivatedRoute) {
  console.log(route);
}

o

constructor(private router:Router) {
  router.events.subscribe(...);
}

Ver también escucha de eventos de enrutador Angular 2


3
eso me da el camino 'url'. ¿Cómo encuentro los 'nombres de ruta' para poder pasarlos en una matriz al navigatemétodo junto con el nombre (adjunto) de la ruta secundaria a la que quiero navegar?
pdeva

Veo. Tampoco encuentro esto satisfactorio. No lo he intentado yo mismo, pero tal vez lo MyTrackingServiceexplicado en stackoverflow.com/a/34548656/217408 permitiría acceder a estos valores.
Günter Zöchbauer

Los nombres de ruta se han ido ahora.
Günter Zöchbauer

44
@GunterZochbauer, ¿hay alguna forma de obtener la ruta solicitada antes de que se active? Por ejemplo, si quiero guardar el pedido dentro de la ruta de un canActivate()método, de modo que pueda redirigir a una página de "inicio de sesión", y luego redirigir volver a la ruta original después de autenticación del usuario?
Yevgeny Ananin

1
¿No puedes hacer eso con un guardia canActivate?
Günter Zöchbauer

42

para nuevo enrutador> = RC.3

¡La mejor y más simple forma de hacerlo es!

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  // to print only path eg:"/login"
}

¿Cómo difiere esta respuesta de lowcrawler's?
not2savvy

1
@ not2savvy había dado una forma más de descubrir lo mismo a través del enrutador de eventos de enrutador, lo que ayudó a algunas de las personas a encontrar lo que estaban buscando.
Rajath MS

36

Utilizar este

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

Y en main.tsimportación

import 'rxjs/add/operator/filter';

EDITAR

Manera moderna

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

11
¿Es esta realmente la forma recomendada de hacer algo tan simple como verificar hacia dónde apunta la URL actual? No estoy discutiendo contra ti en este caso. Sin embargo, noté que el enrutamiento es una fuente de muchos cambios, actualizaciones, confusiones, etc. Esperaba que ActivatedRoute se usara principalmente para esto, no para el enrutador . ¿Me estoy perdiendo la complejidad del problema, tal vez?
DonkeyBanana

Me refiero a ActivatedRoute en los documentos oficiales.
DonkeyBanana

1
No es necesario al menos aquí, el enrutador exporta el tipo "RouterEvent" que se extiende por los otros eventos del enrutador - angular.io/api/router/RouterEvent
chrismarx

1
@chrismarx arreglado
Vlad

@DonkeyBanana En realidad, si se trata de módulos anidados que contienen sus propias rutas, entonces sí. De hecho, utilizando módulos y enrutadores anidados (que es lo que incluso recomienda el Equipo Angular) esta es la única forma de obtener la URL real de la ruta actual, todos los demás métodos simplemente regresarán /.
Eagerestwolf

32

Para aquellos que todavía están buscando esto. En Angular 2.x hay algunas formas de hacerlo.

constructor(private router: Router, private activatedRoute: ActivatedRoute){

   // string path from root to current route. i.e /Root/CurrentRoute
   router.url 

    // just the fragment of the current route. i.e. CurrentRoute
   activatedRoute.url.value[0].path

    // same as above with urlSegment[]
   activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))

   // same as above
   activatedRoute.snapshot.url[0].path

   // the url fragment from the parent route i.e. Root
   // since the parent is an ActivatedRoute object, you can get the same using 
   activatedRoute.parent.url.value[0].path
}

Referencias

  1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
  2. https://angular.io/docs/ts/latest/api/router/index/Router-class.html
  3. https://angular.io/docs/ts/latest/guide/router.html

27

Para obtener los segmentos de ruta:

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

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

14

Puedes probar con

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

constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url)  // array of states
console.log(activatedRoute.snapshot.url[0].path) }

Formas alternativas

router.location.path();   this works only in browser console. 

window.location.pathname que da el nombre del camino.


update: enabledRoute.snapshot.url es un Observable ahora y debes suscribirte a él.
Sadok Mtir

12

Para obtener de manera confiable la ruta actual completa, puede usar esto

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);

9

El windowobjeto nativo también funciona bien

console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);

NOTA: NO UTILICE ESTO EN RENDER LADO DEL SERVIDOR


1
Tenga cuidado si está utilizando la representación del lado del servidor, esto se romperá.
Jason Foglia

7

versión corta si tienes enrutador importado, simplemente puede usar algo como

this.router.url === "/ search"

de lo contrario, haga lo siguiente

1) Importar el enrutador

import { Router } from '@angular/router';

2) Declarar su entrada en constructor

constructor(private router: Router) { }

3) Use su valor en su función

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

La respuesta de @victor me ayudó, esta es la misma respuesta que él pero con un pequeño detalle, ya que podría ayudar a alguien


6
import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}

5

En Angular2 Rc1 puede inyectar RouteSegment y pasarlos en el método naviagte.

constructor(private router:Router,private segment:RouteSegment) {}

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }

5

Con angular 2.2.1 (en un proyecto basado en angular2-webpack-starter) funciona esto:

export class AppComponent {
  subscription: Subscription;
  activeUrl: string;

  constructor(public appState: AppState,
              private router: Router) {
    console.log('[app] constructor AppComponent');
  }

  ngOnInit() {
    console.log('[app] ngOnInit');
    let _this = this;
    this.subscription = this.router.events.subscribe(function (s) {
      if (s instanceof NavigationEnd) {
        _this.activeUrl = s.urlAfterRedirects;
      }
    });
  }

  ngOnDestroy() {
    console.log('[app] ngOnDestroy: ');
    this.subscription.unsubscribe();
  }
}

En la plantilla de AppComponent puede usar, por ejemplo, {{activeUrl}}.

Esta solución está inspirada en el código de RouterLinkActive.


esta es una buena respuesta b / c si tiene una ruta comodín que redirige a / home event.url no es suficiente para coincidir con la ruta / home, en realidad mostrará la ruta que no existe. event.urlAfterRedirects imprimirá la ruta final real. ty.
Ian Poston Framer

4

angular 2 rc2

router.urlTree.contains(router.createUrlTree(['/home']))

4

Esto es lo que me funciona en Angular 2.3.1.

location: any;

constructor(private _router: Router) { 

      _router.events.subscribe((data:any) => { this.location = data.url; });

      console.warn(this.location);  // This should print only path e.g. "/home"
}

El dataes un objeto y necesitamos la urlpropiedad contenida en ese objeto. Así que capturamos ese valor en una variable y también podemos usar esa variable en nuestra página HTML. Por ejemplo, quiero mostrar un div solo cuando el usuario está en la página de inicio. En este caso, el valor de la URL de mi enrutador será /home. Entonces puedo escribir un div de la siguiente manera:

<div *ngIf="location == '/home'">
This is content for the home page.
</div>

4

Tuve el mismo problema usando

this.router.url

Obtengo la ruta actual con parámetros de consulta. Una solución alternativa que hice fue usar esto en su lugar:

this.router.url.split('?')[0]

No es una solución realmente agradable, pero útil.



4

CAMINO 1 : Uso de Angular: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

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

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

WAY 2 Window.location como lo hacemos en Javascript, si no desea usar el enrutador

this.href= window.location.href;

3

Para tus propósitos puedes usar this.activatedRoute.pathFromRoot.

import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}

Con la ayuda de pathFromRoot puede obtener la lista de URL principales y verificar si la parte necesaria de la URL coincide con su condición.

Para obtener información adicional, consulte este artículo http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ o instale ng2-router-helper desde npm

npm install ng2-router-helper

3

Para encontrar el padre de la ruta actual, puede obtener UrlTreeel enrutador, utilizando rutas relativas:

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});

Luego para obtener los segmentos de la salida primaria:

tree.root.children[PRIMARY_OUTLET].segments;

3

A partir de ahora, estoy recibiendo mi camino de la siguiente manera:

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

Donde, routeres una instancia deActivatedRoute



3
import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
  // Detect current route
  router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      console.log(val.url);
    }
});

2

esto es simple, en angular 2 solo necesita importar la biblioteca de enrutadores de esta manera:

import { Router } from '@angular/router';

Luego, en el constructor del componente o servicio, debe crear una instancia de esta manera:

constructor(private _router: Router) {}

Luego, en cualquier parte del código, ya sea en una función, método, construcción, lo que sea:

      this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;  
                });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL                    
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 

2

Puede usar en el archivo .ts

import { Route, Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

1

esta podría ser su respuesta, use el método de parámetros de ruta activada para obtener el parámetro de la URL / ruta que desea leer, a continuación se muestra un fragmento de demostración

import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
             this.yourVariable = params['required_param_name'];
        });
    }
}

1
this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

1

Si necesita acceder a la URL actual, generalmente debe esperar a que NavigationEnd o NavigationStart hagan algo. Si solo se suscribe a los eventos del enrutador, la suscripción generará muchos eventos en el ciclo de vida de la ruta. En su lugar, use un operador RxJS para filtrar solo el evento que necesita. ¡El efecto secundario beneficioso de esto es que ahora tenemos tipos más estrictos!

constructor(private router: Router) {
    router.events.pipe(
      filter(ev => (ev instanceof NavigationEnd))
    ).subscribe((ev: NavigationEnd) => {
      console.log(ev.url);
    });
}


1

Estaba enfrentando el problema donde necesitaba la ruta URL cuando el usuario navega por la aplicación o accede a una URL (o actualiza una URL específica) para mostrar componentes secundarios basados ​​en la URL.

Además , quiero un Observable que se pueda consumir en la plantilla, por lo que router.url no era una opción. El enrutador tampoco emite suscripción porque el enrutamiento se activa antes de que se inicialice la plantilla del componente.

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

¡Espero que ayude, buena suerte!


1
Esto es asombroso
codeepic
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.