Comment rediriger vers une URL externe depuis une route angular2 sans utiliser de composant?

Question

Je voudrais créer une redirection externe, mais pour faire tous les parcours cohérent je pense qu'il serait bien de le faire tout(y compris les redirections externes) en vertu de Routeur États de configuration.

donc:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'first', component: FirstComponent},
  {path: 'second', component: SecondComponent},
  {path: 'external-link', /*would like to have redirect here*/}      
];

UPD: et je ne veux pas utiliser d'élément vide pour ce cas comme @koningdavid suggéré. Cette solution a l'air vraiment bizarre pour moi. Il devrait être quelque chose de vraiment facile à mettre en œuvre pour de tels cas, sans composants virtuels.

Answer 1

Vous pouvez réaliser ce que vous voulez avec un truc à l'aide de la résoudre l'option d'un itinéraire. Résoudre les quelques données de la valeur que Angular2 obtiendra pour l'itinéraire être initialisé. Plus de détails vous pouvez trouver ici dans la documentation officielle.

J'ai essayé cette approche et il fonctionne. Exemple:

Ajoutez à cela le fournisseur de la section (plus importer les classes nécessaires à partir de Routage)

@NgModule({
    providers: [
        {
            provide: 'externalUrlRedirectResolver',
            useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
            {
                window.location.href = (route.data as any).externalUrl;
            }
        }
    ]
})

Ensuite, vous pouvez définir votre itinéraire comme ceci:

{
        path: 'test',
        component: AnyRandomComponent,
        resolve: {
            url: 'externalUrlRedirectResolver'
        },
        data: {
            externalUrl: 'http://www.google.com'
        }
    }

Ce sera redirigé vers l'URL externe. C'est un peu un hackish manière vraiment. J'ai essayé d'atteindre le résultat sans l'aide du composant à tous, mais vous devez utiliser redirectTo ou component ou children ou loadChildren. redirectTo ne déclenchent pas la résoudre et je ne suis pas sûr au sujet des enfants, si vous pouvez faire l'expérience.

Vous pouvez la mettre en œuvre dans une classe de nice plutôt que directement de la fonction de fournisseur. Plus d'infos dans la documentation (voir la référence ci-dessus).

P. S. j'aurais vraiment préféré utiliser une redirection composant de moi-même, je pense. Utilisez simplement le truc avec les données et l'obtention de l'état du routeur externalUrl pour obtenir ce que d'un paramètre.

Answer 2

Vous pouvez créer un RedirectGuard:

 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;

  }
}
 

Importez-le dans app.module:

 providers: [RedirectGuard],
 

Et définissez votre itinéraire:

 {
     path: 'youtube',
     canActivate: [RedirectGuard],
     component: RedirectGuard,
     data: {
       externalUrl: 'https://www.youtube.com/'
     }
 }
 

Answer 3

Pour autant que je sache, le routeur NG2 ne prend pas en charge la redirection externe. Vous pouvez créer un composant de redirection en guise d'une solution de contournement.

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

@Component({
  selector: 'redirect',
  template: 'redirecting...'
})
export class RedirectComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    window.location.href = 'http://www.redirecturl.com'
  }
}
 

Et utilisez-le dans votre routage

 { path: 'login', component: RedirectComponent, pathmath: 'full'},
 

Answer 4

Hmm ...

Je pense que vous pouvez simplement demander l’URL au lieu d’appeler ng2 Router ...

---

Par exemple...

 <a href="http://example.com">External</a>
 

au lieu de

 <a routerLink="/someRoute" routerLinkActive="active">External</a>
 

OU

 window.location.href = 'http://www.example.com'
 

au lieu de

 this.router.navigate( [ '/someRoute', 'someParam' ] );
 

---

Droite...?

Answer 5

Le routeur ne peut pas rediriger en externe. Une ressource externe ne peut pas être un état de l'application.

Si c'est uniquement à des fins de clarté, en gardant toutes les routes visibles au même endroit, vous pouvez définir un autre tableau constant avec tous les chemins externes dans le même fichier que les routes.