angular2 routing - route - Cómo obtener solo la ruta de acceso de la cadena de url completa

this router navigate params

Question

Cuando uso Router ( this.router.url ) obtengo la cadena /MyRouterName?type=abc , en algún momento /MyRouterName si no tengo el parámetro

¿Puedo obtener solo la ruta /MyRouterName (para todos los casos) de la URL completa?

Answer 1

Esto funciona para mi

Importa esto:

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

Luego se lo pasa al constructor:

path: any;

constructor(private router: Router) {
  this.path = this.router.url;
  console.log(this.path);
}

Answer 2

He intentado usar las otras respuestas y todas terminan con indefinido .

Así que hice esto:

#AppComponent
constructor(private router: Router){
  // Subscribe to RouterEvents
  this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationStart) {
      // Could add more chars url:path?=;other possible
      const urlDelimitators = new RegExp(/[?//,;&:#$+=]/);
      let currentUrlPath = event.url.slice(1).split(urlDelimitators)[0];
      console.log(''URL_PATH: '', currentUrlPath);
    }
  });
}

Me suscribo a los cambios del enrutador, por lo que, cuando se produce NavitionStartEvent, se encuentra una nueva URL_PATH.

Answer 3

La respuesta que ha dado el usuario 5049376 no funcionó para mí. La propiedad url no estaba definida.

console.log(activatedRoute.snapshot.url[0].path); 

En lugar de eso utilicé la propiedad firstChild.

console.log(this.activatedRoute.snapshot.firstChild.url[0].path);

Answer 4

Puede usar la instantánea del componente de ruta activada para obtener esta URL.

import { Router, ActivatedRoute } from ''@angular/router'';
 constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {

    console.log("routes");
    console.log(activatedRoute.snapshot.url); // array of states
    console.log(activatedRoute.snapshot.url[0].path); 
}

Enlace a la respuesta SO original por Jose G Varanam Cómo obtener la ruta actual

Answer 5

Si no necesita ser compatible con IE, puede usar la clase de URL para hacer ingeniería inversa de los componentes de URL de la cadena:

(new URL(this.router.url), ''x:/'').pathName

Teniendo en cuenta su ejemplo, el código anterior solo proporcionará la parte "/ MyRouterName" de "/ MyRouterName? Type = abc".

Nota: la parte ''x: /'' solo existe para satisfacer la necesidad de la clase de URL ''para un protocoll (que este.router.url no proporciona).

Answer 6

si vuelve a cargar la página, no puede obtener la ruta de la ruta por Router o ActivatedRoute. Puedes usar window.location.pathname lugar de eso.