angular - current - Cómo obtener la ruta actual

redirect angular 5

Question

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?

Answer 1

CAMINO 1 : Usando 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;

Answer 2

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, el router es una instancia de ActivatedRoute

Answer 3

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.

Answer 4

El nuevo enrutador V3 tiene una propiedad de URL.

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

Answer 5

El objeto de window 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

Answer 6

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

Answer 7

Estaba enfrentando el problema donde necesitaba la ruta de la 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!

Answer 8

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

Los data son un objeto y necesitamos la propiedad url 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>

Answer 9

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

Actualizar

En el enrutador V3 (RC.3) puede inyectar ActivatedRoute y acceder a más detalles utilizando su propiedad de snapshot .

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

Answer 10

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

Answer 11

Para encontrar el padre de la ruta actual, puede obtener el UrlTree del 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;

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

Answer 13

Para sus propósitos, puede 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

Answer 14

Puede usar ActivatedRoute para obtener el enrutador actual

Respuesta original (para la versión RC)

¡Encontré una solución en AngularJS Google Group y es muy fácil!

ngOnInit() {
this.router.subscribe((url) => console.log(url));
}

Aquí está la respuesta original.

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

Answer 15

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

Answer 16

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 proporciona el nombre de la ruta.

Answer 17

RC4 angular:

Puede importar el Router desde @angular/router

Luego inyectarlo:

constructor(private router: Router ) {
}

Luego llame a su parámetro de URL:

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

Answer 18

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

Answer 19

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.

Answer 20

Utilizar esta

import { Router, NavigationEnd } from ''@angular/router'';
constructor(private router: Router) {
router.events.filter((event: any) => event instanceof NavigationEnd)
.subscribe(event => {
console.log(event);
});
}

Y en main.ts import

import ''rxjs/add/operator/filter'';

EDITAR

Manera moderna

import {filter} from ''rxjs/operators'';
router.events.pipe(
filter((event: any) => event instanceof NavigationEnd)
)
.subscribe(event => {
console.log(event);
});

Answer 21

angular 2 rc2

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

Answer 22

en el archivo componente:

import {ActivatedRouteSnapshot} from ''@angular/router'';
constructor(state: ActivatedRouteSnapshot) {
console.log(state.path)
}

en el archivo de ruta:

Answer 23

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''];
});
}
}

Answer 24

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

Answer 25

versión corta si tiene un 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

Answer 26

router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
this.currentUrl = e.url;
}
});

Answer 27

Para obtener los segmentos de ruta:

import { ActivatedRoute, UrlSegment } from ''@angular/router'';
constructor( route: ActivatedRoute) {}
getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

Answer 28

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

Answer 29

import {ActivatedRoute} from ''@angular/router'';
constructor(private route:ActivatedRoute){
console.log(this.route.routeConfig.path);
}

Answer 30

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