Minitip: angular – redireccionar a una página externa usando router

Hay varios motivos por los que usar el router de Angular en vez de pegar el enlace externo en un link. No voy a hablar de ello aquí, sino que solo voy a poner, de forma muy escueta, cómo hacerlo si habéis decidido hacerlo así. Es muy simple y muy fácil de hacer.

Primero se crea un RedirectGuard (en la carpeta que os de la gana, mientras luego os acordéis de dónde es para las importaciones):


import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {

constructor(private router: Router) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

window.location.href = route.data['externalUrl'];
return true;

}
}

 
En app.module hay que importarlo:


providers: [RedirectGuard],

 
Y en la definición de los enrutamientos, se define así la redirección:


{
path: 'nombreDeRuta',
canActivate: [RedirectGuard],
component: RedirectGuard,
data: {
externalUrl: 'urlExterna'
}
}

 
Y ya se puede redireccionar, usando routerLink: [‘/nombreDeRuta’] (la que le hayáis dado).

 

************************************************************

Espero que esta entrada pueda ser de utilidad, y si no, como siempre, aquí tenéis un gato para compensar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *