angular 노트 경로 의 angular-router 를 자세히 설명 합 니 다.

본 고 는 angular 필기 루트 의 angular-router 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
프로젝트 생 성

ng new router --routing 
\\  routing  
\\      app-routing.module.ts   

루트 의 기본 사용
명칭.
간단 한 소개
Routes
경로 설정,어떤 URL 을 저장 하여 어떤 구성 요소 와 어떤 RouterOutler 에서 보 여 주 는 지 보 여 줍 니 다.
RouterOutler
HTML 에 루트 내용 을 표시 하 는 자리 표시 명령
Router
실행 중인 경로 대상 은 navigate()와 navigate ByUrl()방법 으로 지정 한 경로 로 탐색 할 수 있 습 니 다.
RouterLink
HTML 에서 내 비게 이 션 명령 을 설명 합 니 다.
ActivatedRoute
현재 활성 화 된 경로 대상 은 현재 경로 정보,경로 주소,경로 매개 변 수 를 저장 합 니 다.
경로 개체 그림

루트 기본 설정

const routes:Routes = [
 {path:'',component:HomeComponent}, \\   path     \ 
 {path:'app',component:AdminComponent}
];

경로 어댑터 설정

{path:'**',component:Code404Component}
//                 ，          ，  angualr          

HTML 안쪽 점프 링크

<a [routerLink]="['/']">  </a>
<a [routerLink]="['/app']">  </a>
<router-outlet></router-outlet>

js 안에서 경로 이동

<input type='button' value='     ' (click)="toApp()">

constructor(private router:Router){
 }
//     
 toApp(){
 this.router.navigate(['/app'])
 }

경로 데이터 전달
1.조회 매개 변수 에서 데 이 터 를 전달 합 니 다.

/app?id=2 => ActivatedRoute.queryParams[id]
//html  
<a [routerLink]="['/app']" [queryParams]="{id:1}">  </a>
// js  
private appId:number
 constructor(private routerInfo:ActivatedRoute) { }

 ngOnInit() {
 this.appId = this.routerInfo.snapshot.queryParams['id']
 }

2.경로 에서 데 이 터 를 전달 합 니 다.

{path:/app/:id} => /app/1 => ActivatedRoute.params[id]
//       
<a [routerLink]="['/app',1]">  </a>

3.경로 설정 에서 데 이 터 를 전달 합 니 다.

{path:/product,component:Appcomponent,data:[IsProd:true]}  => ActivatedRoute.data[0][IsProd]

파라미터 스냅 샷 과 파라미터 구독
snapshot 은 매개 변수 스냅 샷 입 니 다.이 구성 요소 에 들 어 갈 때 단 추 를 누 르 면 이 경로 에 들 어 가 는 ngOnInit()방법 은 한 번 만 실 행 됩 니 다.이미 활성화 되 었 습 니 다.두 번 째 로 는 실행 되 지 않 습 니 다.

ngOnInit() {
 this.appId = this.routerInfo.snapshot.queryParams['id']
 }

subscribe 는 매개 변수 구독 입 니 다.이것 은 RxJs 에 속 하 는 것 입 니 다.

private appId:number

 constructor(private routerInfo:ActivatedRoute) { }

 ngOnInit() {
 this.routerInfo.params.subscribe((params:Params) => {
  this.appId = params['id']
 })
 }

경로 변경

{path:'',redirectTo:'/home',pathMatch:'full'},

하위 경로

{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ]},
//    HomeComponent，    <router-outlet></router-outlet>  

보조 경로

// html     
<router-outlet></router-outlet>
<router-outlet name='aux'></router-outlet>
//      
{path:'app',Appcomponet,outlet:'aux'}

경로 수비
사용자 가 로그 인하 고 권한 이 있 을 때 만 들 어 갈 수 있 습 니 다.
다 중 폼 으로 구 성 된 마법사,예 를 들 어 등록 절차,조건 을 만족 시 켜 야 다음 경로 에 들 어 갈 수 있 습 니 다.
사용자 실행 동작 이 저장 되 지 않 았 습 니 다.떠 나 려 고 할 때 알림 을 진행 합 니 다.
명칭.
설명 하 다.
CanAxtivate
어떤 경로 로 탐색 처리
CanDeactivate
현재 경로 이탈 처리
Resolve
경로 가 활성화 되 기 전에 경로 데 이 터 를 가 져 옵 니 다.
1.CanAxtivate 의 사용

//       
import {CanActivate} from '@angular/router'
export class LoginGuard implements CanActivate{
 //                 false     
 canActivate(){
 let isLOgin:boolean = true;
 return isLOgin;
 }
}

canActivate 는 하나의 배열 로 여러 개 를 받 을 수 있 습 니 다.각각 true 로 돌아 갈 때 만 허용 합 니 다.

//       ，      canActivate
{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ],canActivate:[LoginGuard]},
  NgModule

providers:[LoginGuard]

2.CanDeactivate 사용

//       
import {CanDeactivate} from '@angular/router'
import {AppComponent} from "../app.component";

/**
 *       
 *       
 */
export class OutGuard implements CanDeactivate<AppComponent>{
 // component      AppComponent   
 canDeactivate(component:AppComponent){
 return window.confirm('            ？')
 }
}

경로 설정 수정

{path:'home',component:HomeComponent,children:[
 {path:'',component:IndexComponent}
 ],canActivate:[LoginGuard],canDeactivate:[OutGuard]},

providers:[LoginGuard,OutGuard]

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.