Angular4의 라우팅 Router 클래스 예제에 대한 자세한 설명

최근에Angular4를 배우고 있습니다. 확실히 이전보다 많이 바뀌고 개선되었습니다. 다행히도 공식 문서와 예제가 중국어로 되어 있습니다. 큰 차이를 배우도록 도와주세요.

공식 주소:

학습 과정에서 라우팅(라우터) 메커니즘은 분리될 수 없으며 여러 곳에서 사용됩니다.

첫 번째 경로 구성 경로:

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

코드 보기

두 번째 경로 점프 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 }

코드 보기

1. 루트 루트/로그인으로 점프하세요.

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

2. 현재 경로를 기준으로 점프하도록 설정합니다. 경로는 ActivatedRoute

의 인스턴스입니다. this.router.navigate( ['login', 1],{relativeTo: Route}); this.router.navigate(['login', 1],{relativeTo: route}); 

3.路由中传参数 /login?name=1

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

4.preserveQueryParams默认值为false，设为true，保留之前路由中的查询参数/login?name=1 to /home?name=1

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

5.路由中锚点跳转 /home#top

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

6.preserveFragment默认为false，设为true，保留之前路由中的锚点/home#top to /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 });

3. 매개변수/login?name=1

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

4.preserveQueryParams 기본값은 false이고 true로 설정되며 쿼리 매개변수 /login?name=1을 /home?name으로 유지합니다. = 이전 경로에서 1

this.router.navigate(['home'], { PreserveQueryParams: true }); 🎜🎜5 경로의 앵커 포인트는 /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로 설정됩니다. 경로가 점프할 때 브라우저는 변경되지 않지만 전달된 매개변수는 여전히 유효합니다🎜🎜this.router.navigate(['/home'], {skipLocationChange: true });🎜🎜8.replaceUrl이 설정된 경우 기본값은 true입니다. false로 설정하면 경로가 점프하지 않습니다🎜 🎜this.router.navigate(['/home'], { replacementUrl: true }); 🎜🎜 🎜🎜아직 배워야 할 것이 많습니다. 여기에서는 먼저 점프에 관해 글을 쓸 것입니다. 모두가 서로에게서 배우고 자신이 겪은 함정을 공유할 수 있기를 바랍니다. 🎜🎜🎜

위 내용은 Angular4의 라우팅 Router 클래스 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!