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 });

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