change - dynamic title angular 4

¿Cómo determinar la URL de la página anterior en Angular?

Question

Supongamos que actualmente estoy en la página que tiene la URL /user/:id . Ahora desde esta página navego a la página siguiente :id/posts .

Ahora, ¿hay alguna manera para que pueda verificar cuál es la URL anterior, es decir, /user/:id .

Abajo están mis rutas

export const routes: Routes = [
{
path: ''user/:id'', component: UserProfileComponent
},
{
path: '':id/posts'', component: UserPostsComponet
}
];

Answer 1

@ GünterZöchbauer también puede guardarlo en el almacenamiento local, pero no lo prefiero) mejor para ahorrar en el servicio y obtener este valor desde allí

 constructor(
private router: Router
) {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
localStorage.setItem(''previousUrl'', event.url);
}
});
}

Answer 2

Código actualizado angular 6 para obtener la url anterior como cadena.

import { Router, RoutesRecognized } from ''@angular/router'';
import { filter, pairwise } from ''rxjs/operators'';
export class AppComponent implements OnInit {
constructor (
public router: Router
) {
}
ngOnInit() {
this.router.events
.pipe(filter((e: any) => e instanceof RoutesRecognized),
pairwise()
).subscribe((e: any) => {
console.log(e[0].urlAfterRedirects); // previous url
});
}

Answer 3

Crea un servicio inyectable:

import { Injectable } from ''@angular/core'';
import { Router, RouterEvent, NavigationEnd } from ''@angular/router'';
/** A router wrapper, adding extra functions. */
@Injectable()
export class RouterExtService {
private previousUrl: string = undefined;
private currentUrl: string = undefined;
constructor(private router : Router) {
this.currentUrl = this.router.url;
router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
};
});
}
public getPreviousUrl(){
return this.previousUrl;
}
}

Luego, úselo donde lo necesite. Para almacenar la variable actual lo antes posible, es necesario usar el servicio en el AppModule.

// AppModule
export class AppModule {
constructor(private routerExtService: RouterExtService){}
//...
}
// Using in SomeComponent
export class SomeComponent implements OnInit {
constructor(private routerExtService: RouterExtService, private location: Location) { }
public back(): void {
this.location.back();
}
//Strange name, but it makes sense. Behind the scenes, we are pushing to history the previous url
public goToPrevious(): void {
let previous = this.routerExtService.getPreviousUrl();
if(previous)
this.routerExtService.router.navigateByUrl(previous);
}
//...
}

Answer 4

Esto funcionó para mí en angular 6:

this.router.events
.subscribe((event) => {
if (event instanceof NavigationStart) {
window.localStorage.setItem(''previousUrl'', this.router.url);
}
});

Answer 5

Puede suscribirse a los cambios de ruta y almacenar el evento actual para poder usarlo cuando suceda lo siguiente

previousUrl: string;
constructor(router: Router) {
router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(e => {
console.log(''prev:'', this.previousUrl);
this.previousUrl = e.url;
});
}

Consulte también ¿Cómo detectar un cambio de ruta en Angular 2?

Answer 6

Quizás todas las otras respuestas son para angular 2.X.

Ahora no funciona para 5.X angular. Estoy trabajando con eso.

con solo NavigationEnd, no puede obtener la URL anterior.

porque el enrutador funciona desde "NavigationStart", "RoutesRecognized", ..., hasta "NavigationEnd".

Puedes consultar con

 router.events.forEach((event) => {
console.log(event);
});

Pero aún así no puede obtener la URL anterior incluso con "NavigationStart".

Ahora necesita usar pairwise.

import ''rxjs/add/operator/filter'';
import ''rxjs/add/operator/pairwise'';
constructor(private router: Router) {
this.router.events
.filter(e => e instanceof RoutesRecognized)
.pairwise()
.subscribe((event: any[]) => {
console.log(event[0].urlAfterRedirects);
});
}

Con pairwise, puede ver de qué url es y hacia.

"RoutesRecognized" es el paso cambiante desde el origen a la URL de destino.

así que filtre y obtenga la url anterior de ella.

Por último, si bien no menos importante,

este código coloca el componente principal o superior (por ejemplo, app.component.ts)

porque este código se activa después de finalizar el enrutamiento.

Answer 7

Tuve un problema similar cuando quise volver a la página anterior. La solución fue más fácil de lo que podía imaginar.

<button [routerLink]="[''../'']">
Back
</button>

Y vuelve a la URL principal. Espero que ayude a alguien;)