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

두 번째 경로 점프 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 루트 경로로 /login으로 이동합니다

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

.

2. 현재 경로를 기준으로 점프하도록 설정합니다. 이를 사용하려면 ActivatedRoute

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

3에 매개변수를 전달해야 합니다.

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

4.preserveQueryParams 기본값은 false이고 true로 설정되며 이전 경로

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

5에서 쿼리 매개변수 /login?name=1을 /home?name=1로 유지합니다. 경로의 지점이 /home#top

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

6.preserveFragment의 기본값은 false이고 true로 설정되며 이전 경로의 앵커 지점 /home#top을 /role#top으로 유지합니다

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

7.skipLocationChange는 기본값이 false이고 true로 설정되어 경로를 건너뜁니다. 전송 중에 브라우저의 URL은 변경되지 않지만 전달된 매개변수는 여전히 유효합니다.

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

8.replaceUrl의 기본값은 true입니다. false로 설정하면 경로가 점프하지 않습니다

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

위 내용은 Angular4에서 Router 클래스의 점프 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!