Angular4のRouterクラスのジャンプナビゲーション

この記事では、Angular4 の Router クラスのジャンプ ナビゲーションについて詳しく説明します。興味のある方は参考にしてください。

私は最近 angular4 を学習していますが、以前よりもはるかに優れています。変更点や改善点は分かりにくいですが、幸いにも公式ドキュメントや例文は中国語なので、英語が苦手な人にとっては非常に助かります。

学習の過程において、ルーティング（ルーター）機構は切り離せないものであり、多くの場所で使用されます。

最初のルート設定 ルート:

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

2番目のルートジャンプ 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. ルートルート

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

で/loginにジャンプします。

2 .現在のルートに相対的にジャンプするようにrelativeToを設定します。ルートはActivatedRouteのインスタンスです。これを使用するには、route/login?name=1

3にパラメータをインポートする必要があります。

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

4.preserveQueryParams のデフォルト値は false で、true に設定され、前のルートのクエリ パラメーター /login?name=1 から /home?name=1 を保持します

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

5。ルート内のポイントは /home#top にジャンプします

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

6.preserveFragment のデフォルトは false ですが、true に設定すると、アンカー ポイント /home#top を前のルートの /role#top に保持します

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

7.skipLocationChange のデフォルトは false、true に設定すると、ルートはスキップされます ブラウザ内の URL は転送中に変更されませんが、渡されたパラメータは引き続き有効です

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

8.replaceUrl のデフォルトは true、 false に設定すると、ルートはジャンプしません

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

以上がAngular4のRouterクラスのジャンプナビゲーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。