Sauter la navigation de la classe Router dans Angular4-js tutoriel-php.cn

Sauter la navigation de la classe Router dans Angular4

不言

Libérer： 2018-05-05 15:57:50

original

2740 Les gens l'ont consulté

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 &#39;@angular/core&#39;;
import { RouterModule, Routes } from &#39;@angular/router&#39;;
 
import { HomeComponent }  from &#39;./home.component&#39;;
import { LoginComponent }   from &#39;./login.component&#39;;
import { RegisterComponent } from &#39;./register.component&#39;;
 
 const routes: Routes = [
  { path: &#39;&#39;, redirectTo: &#39;/home&#39;, pathMatch: &#39;full&#39; },
  { path: &#39;home&#39;, component: HomeComponent },
  { path: &#39;login&#39;, component: LoginComponent },
  { path: &#39;heroes&#39;,   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

this.router.navigate([&#39;login&#39;]);

Copier après la connexion

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([&#39;login&#39;, 1],{relativeTo: route});

Copier après la connexion

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

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

Copier après la connexion

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([&#39;home&#39;], { preserveQueryParams: true });

Copier après la connexion

5. 🎜>

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

Copier après la connexion

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([&#39;/role&#39;], { preserveFragment: true });

Copier après la connexion

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([&#39;/home&#39;], { skipLocationChange: true });

Copier après la connexion

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

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

Copier après la connexion

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!