Maison >interface Web >js tutoriel >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!