Sauter la navigation de la classe Router dans Angular4

Cet article présente principalement l'explication détaillée de la navigation par saut de la classe Router dans Angular4. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

J'ai récemment appris Angular4, et c'est effectivement le cas. mieux que Il y a eu de grands changements et améliorations dans le passé, mais de nombreux endroits ne sont pas si faciles à comprendre. Heureusement, les documents officiels et les exemples sont en chinois, ce qui est toujours très utile pour ceux qui ne sont pas bons en anglais.

Dans le processus d'apprentissage, le mécanisme de routage (routeur) est indissociable et est utilisé dans de nombreux endroits.

Première configuration de l'itinéraire Itinéraire :

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent }  from './home.component';
import { LoginComponent }   from './login.component';
import { RegisterComponent } from './register.component';
 
 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'heroes',   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

Deuxièmement, sauter l'itinéraire Router.navigate

 navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>

 interface NavigationExtras {
  relativeTo : ActivatedRoute
  queryParams : Params
  fragment : string
  preserveQueryParams : boolean
  queryParamsHandling : QueryParamsHandling
  preserveFragment : boolean
  skipLocationChange : boolean
  replaceUrl : boolean
}

1. Accédez à /connexion avec la route racine

this.router.navigate(['login']);

2. Définissez relativeTo pour sauter par rapport à l'itinéraire actuel. L'itinéraire est une instance de ActivatedRoute. Pour l'utiliser, vous devez importer ActivatedRoute

this.router.navigate(['login', 1],{relativeTo: route});

.

3. Paramètre Routing Pass /login?name=1

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

4.preserveQueryParams la valeur par défaut est false, définie sur true, conserve la requête paramètres /login dans l'itinéraire précédent ?name=1 à /home?name=1

this.router.navigate(['home'], { preserveQueryParams: true });

5. 🎜>

 this.router.navigate(['home'],{ fragment: 'top' });

6.preserveFragment est défini par défaut sur false, défini sur true et conserve le point d'ancrage /home#top à /role#top dans l'itinéraire précédent

this.router.navigate(['/role'], { preserveFragment: true });

7.skipLocationChange est par défaut false, défini sur true, l'URL dans le navigateur restera inchangée lorsque l'itinéraire saute, mais les paramètres transmis sont toujours valide

this.router.navigate(['/home'], { skipLocationChange: true });

8.replaceUrl est par défaut vrai, s'il est défini sur faux, l'itinéraire ne sautera pas

this.router.navigate(['/home'], { replaceUrl: true });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!