Sprungnavigation der Router-Klasse in Angular4

In diesem Artikel wird hauptsächlich die Sprungnavigation der Router-Klasse in Angular4 vorgestellt. Sie hat einen gewissen Referenzwert.

Ich habe kürzlich Angular4 gelernt, und das ist es auch besser als Es gab in der Vergangenheit große Änderungen und Verbesserungen, aber viele Orte sind nicht so leicht zu verstehen. Glücklicherweise sind die offiziellen Dokumente und Beispiele auf Chinesisch, was für diejenigen, die nicht gut Englisch können, immer noch sehr hilfreich ist.

Im Lernprozess ist der Routing-Mechanismus (Router) untrennbar miteinander verbunden und wird an vielen Stellen verwendet.

Erste Routenkonfiguration Route:

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 {}

Zweite Route springen 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. Zu/anmelden mit Root-Route

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

2. Einstellungen relativZu Sprünge relativ zur aktuellen Route sind eine Instanz von ActivatedRoute

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

3. login?name=1

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

4.preserveQueryParams Standardwert ist false, auf true gesetzt, die Abfrageparameter /login?name=1 bis /home beibehalten? name=1 in der vorherigen Route

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

5. Ankersprung im Routing /home#top

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

6 .preserveFragment ist standardmäßig auf „false“ eingestellt, auf „true“ gesetzt und behält den Ankerpunkt /home#top bis /role#top in der vorherigen Route bei

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

7.skipLocationChange ist standardmäßig auf false und auf true gesetzt. Die URL im Browser bleibt unverändert, wenn die Route springt, aber die übergebenen Parameter sind weiterhin gültig

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

8.replaceUrl ist standardmäßig true, auf false gesetzt, die Route springt nicht

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

Das obige ist der detaillierte Inhalt vonSprungnavigation der Router-Klasse in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!