Explication détaillée d'exemples de classe de routeur de routage dans Angular4

J'ai appris Angular4 récemment. Il a en effet beaucoup changé et amélioré qu'avant. Heureusement, les documents officiels et les exemples sont en chinois. Si vous n'êtes pas bon en anglais, là-bas. sont encore quelques-uns très utiles à étudier.

Adresse officielle :

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 :

 1 import { NgModule }             from '@angular/core'; 2 import { RouterModule, Routes } from '@angular/router'; 3   4 import { HomeComponent }   from './home.component'; 5 import { LoginComponent }      from './login.component'; 6 import { RegisterComponent }  from './register.component'; 7   8  const routes: Routes = [ 9    { path: '', redirectTo: '/home', pathMatch: 'full' },10    { path: 'home',  component: HomeComponent },11    { path: 'login', component: LoginComponent },12    { path: 'heroes',     component: RegisterComponent }13  ];14  15  @NgModule({16    imports: [ RouterModule.forRoot(routes) ],17    exports: [ RouterModule ]18  })19  export class AppRoutingModule {}

Voir le code

Deuxièmement, saut d'itinéraire Routeur .navigate

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

 1 interface NavigationExtras { 2     relativeTo : ActivatedRoute 3     queryParams : Params 4     fragment : string 5     preserveQueryParams : boolean 6     queryParamsHandling : QueryParamsHandling 7     preserveFragment : boolean 8     skipLocationChange : boolean 9     replaceUrl : boolean10 }

Afficher le code

1. jump/login

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

2. Définir relativeTo pour sauter par rapport à l'itinéraire actuel est une instance de ActivatedRoute. être importé pour utilisation. ActivatedRoute

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

3. Passer les paramètres dans route/login?name=1

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

4. La valeur par défaut depreserveQueryParams est false , définie sur true, conservez le paramètre de requête /login?name=1 à /home?name=1 dans l'itinéraire précédent

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

5. le point de l'itinéraire passe à /home #top

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

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

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

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

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

8.replaceUrl est par défaut true, défini sur false, l'itinéraire ne sautera pas

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

Il y a beaucoup de choses à apprendre. à propos du saut ici en premier. J'espère que tout le monde pourra le partager. Apprenez à partager les pièges que vous avez traversés.

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!