Detaillierte Erläuterung von Beispielen für die Routing-Router-Klasse in Angular4

Ich habe kürzlich Angular4 gelernt und es hat sich tatsächlich stark verändert. Viele Orte sind nicht so einfach zu verstehen. Wenn Sie nicht gut in Englisch sind Sind noch einige sehr hilfreich zum Lernen.

Offizielle Adresse:

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

Erste Routenkonfiguration Route:

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

Nach dem Login kopieren

Code anzeigen

Zweitens Route Jump Router .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 }

Nach dem Login kopieren

Code anzeigen

1 jump/login

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

2. RelativeTo zum Springen relativ zur aktuellen Route ist eine Instanz von ActivatedRoute zur Verwendung importiert werden.

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

3. Parameter in route/login?name=1

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });4 übergeben. Der Standardwert von „preserveQueryParams“ ist „false“, auf „true“ gesetzt. Der Abfrageparameter /login?name=1 wird in der vorherigen Route beibehalten

this.router.navigate(['home'], { preserveQueryParams: true });5 Punkt in der Route springt zu /home #top

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

6.preserveFragment ist standardmäßig false, auf true setzen und die vorherige Route beibehalten Der Ankerpunkt /home#top zu /role#top

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 sich die Route ändert, aber die übergebenen Parameter sind weiterhin gültig

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

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

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

Es gibt viele Dinge zu lernen, also werde ich es tun Schreiben Sie hier zuerst über den Sprung. Ich hoffe, jeder kann ihn teilen. Lernen Sie, die Fallstricke zu teilen, durch die Sie gegangen sind.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für die Routing-Router-Klasse in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!