Angular에서 라우팅은以模块为单位각 모듈은 자체 라우팅을 가질 수 있습니다. [관련 튜토리얼 추천 : "Angular 튜토리얼"]
1. 라우팅 사용을 위한 페이지 구성요소, 레이아웃 구성요소 및 탐색 구성요소를 생성합니다.
홈 페이지 구성 요소 만들기 ng gc pages/home
About us 페이지 구성 요소 만들기 ng gc pages/about
레이아웃 구성 요소 만들기 ng gc pages/layout
탐색 구성 요소 만들기 ng gc pages/navigation
2. 라우팅 규칙 만들기
// app.module. TS
"@angular/router"에서 { 경로 } 가져오기
const 경로: 경로 = [
{
경로: "집",
구성요소:홈구성요소
},
{
경로: "정보",
구성요소: AboutComponent
}
] 3. 라우팅 모듈을 소개하고
// app.module.ts를시작합니다.
"@angular/router"에서 { RouterModule, Routes } 가져오기
@NgModule({
가져오기: [RouterModule.forRoot(routes, { useHash: true })],
})
내보내기 클래스 AppModule {} 4.路由插座추가
<!-- 라우팅 소켓, 즉 자리 표시자 구성 요소와 일치하는 라우팅 구성 요소가 여기에 표시됩니다 --> <router-outlet></router-outlet>5.
탐색 구성 요소에서
<a routerLink="/home">홈페이지</a>링크를 정의합니다.
<a routerLink="/about">회사 소개</a>
1. 리디렉션
const 경로: 경로 = [
{
경로: "집",
구성요소:홈구성요소
},
{
경로: "정보",
구성요소: AboutComponent
},
{
길: "",
// 리디렉션 리디렉션: "홈",
//완전히 일치하는 pathMatch: "full"
}
] 2. 404 페이지
const 경로: 경로 = [
{
경로: "집",
구성요소:홈구성요소
},
{
경로: "정보",
구성요소: AboutComponent
},
{
길: "**",
구성요소: NotFoundComponent
}
] 1. 쿼리 매개변수
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">회사 소개</a> import { ActivatedRoute } from "@angular/router"
내보내기 클래스 AboutComponent는 OnInit {를 구현합니다.
생성자(비공개 경로: ActivatedRoute) {}
ngOnInit(): 무효 {
this.route.queryParamMap.subscribe(query => {
query.get("이름")
})
}
} 2. 동적 매개변수
const 경로: Routes = [
{
경로: "집",
구성요소:홈구성요소
},
{
경로: "정보/:이름",
구성요소: AboutComponent
}
] <a [routerLink]="['/about', 'zhangsan']">회사 소개</a>
import { ActivatedRoute } from "@angular/router"
내보내기 클래스 AboutComponent는 OnInit {를 구현합니다.
생성자(비공개 경로: ActivatedRoute) {}
ngOnInit(): 무효 {
this.route.paramMap.subscribe(params => {
params.get("이름")
})
}
} 경로 중첩은定义子级路由방법을 나타냅니다.
const 경로: 경로 = [
{
경로: "정보",
구성요소: AboutComponent,
어린이들: [
{
경로: "소개",
구성요소: IntroduceComponent
},
{
경로: "역사",
구성 요소: HistoryComponent
}
]
}
] <!-- about.comComponent.html -->
<앱 레이아웃>
<p>작품에 대해!</p>
<a routerLink="/about/introduce">회사 프로필</a>
<a routerLink="/about/history">개발 내역</a>
<div>
<라우터 아웃렛></라우터 아웃렛>
</div>
</app-layout> 소켓 이름 지정
하위 라우팅 구성 요소를 다른 라우팅 콘센트에 노출합니다.
{
경로: "정보",
구성요소: AboutComponent,
어린이들: [
{
경로: "소개",
구성요소: IntroduceComponent,
콘센트: "왼쪽"
},
{
경로: "역사",
구성 요소: HistoryComponent,
콘센트: "오른쪽"
}
]
} <!-- about.comComponent.html --> <앱 레이아웃> <p>작품에 대해!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet><
/app-레이아웃>
<a
[라우터링크]="[
'/에 대한',
{
콘센트: {
왼쪽: ['소개'],
오른쪽: ['역사']
}
}
]"
>회사 소개</a> <!-- app.comComponent.html --> <button (click)="jump()">개발 기록으로 이동</button>
// app.comComponent.ts
"@angular/router"에서 { 라우터 } 가져오기
내보내기 클래스 HomeComponent {
생성자(개인 라우터: 라우터) {}
점프() {
this.router.navigate(["/about/history"], {
queryParams: {
이름: "키티"
}
})
}
} 루트 모듈의 라우팅 구성을根路由模块이라고 하는 별도의 라우팅 모듈로 추상화한 다음 루트 라우팅 모듈을 루트 모듈에 도입합니다.
"@angular/core"에서 { NgModule } 가져오기
"./pages/home/home.comComponent"에서 { HomeComponent } 가져오기
"./pages/not-found/not-found.comComponent"에서 { NotFoundComponent } 가져오기
const 경로: 경로 = [
{
길: "",
구성요소:홈구성요소
},
{
길: "**",
구성 요소: NotFoundComponent
}
]
@NgModule({
선언: [],
가져오기: [RouterModule.forRoot(routes, { useHash: true })],
// RouterModule 모듈에 제공된 라우팅 소켓 구성 요소가 루트 모듈의 루트 구성 요소에서 사용되므로 Angular 라우팅 기능 모듈을 내보냅니다. [RouterModule]
})
내보내기 클래스 AppRoutingModule {} import { BrowserModule } from "@angular/platform-browser"
"@angular/core"에서 { NgModule } 가져오기
"./app.comComponent"에서 {AppComponent} 가져오기
"./app-routing.module"에서 { AppRoutingModule } 가져오기
"./pages/home/home.comComponent"에서 { HomeComponent } 가져오기
"./pages/not-found/not-found.comComponent"에서 { NotFoundComponent } 가져오기
@NgModule({
선언: [AppComponent, HomeComponent, NotFoundComponent],
가져오기: [BrowserModule, AppRoutingModule],
제공자: [],
부트스트랩: [AppComponent]
})
내보내기 클래스 AppModule {} 경로의 지연 로딩은模块기반으로 합니다.
1. ng gm user --routing=true 사용자 모듈을 생성하고 이 모듈의 라우팅 모듈을 함께 생성합니다.
2. ng gc user/pages/login 로그인 페이지 구성 요소를 생성합니다
. 3. ng gc user/pages/register 등록 페이지 구성 요소를 생성합니다. ng gc user/pages/register
4. 사용자 모듈에 대한 구성 라우팅 규칙
import { NgModule } from "@angular/core"
"@angular/router"에서 { 경로, RouterModule } 가져오기
"./pages/login/login.comComponent"에서 { LoginComponent } 가져오기
"./pages/register/register.comComponent"에서 { RegisterComponent } 가져오기
const 경로: 경로 = [
{
경로: "로그인",
구성 요소: 로그인 구성 요소
},
{
경로: "등록",
구성 요소: RegisterComponent
}
]
@NgModule({
가져오기: [RouterModule.forChild(경로)],
내보내기: [RouterModule]
})
내보내기 클래스 UserRoutingModule {} 5. 사용자 라우팅 모듈을 기본 라우팅 모듈
// app-routing.module.ts에 연결합니다.
const 경로: 경로 = [
{
경로: "사용자",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
] 6. 탐색 구성요소에
액세스 링크<a routerLink="/user/login">로그인</a>을추가하세요.
<a routerLink="/user/register">등록</a>
경로 가드는 요청된 경로에 대한 탐색이 허용되는지 여부를 경로에 알려줍니다.
Route Guard 메서드는 boolean , Observable <boolean> 또는 Promise <boolean> 을 반환할 수 있으며, 이는 향후 특정 시점에 부울 값으로 확인됩니다.
1. CanActivate는
是否可以访问某一个路由확인합니다.
CanActivate为接口경로 가드 클래스는 이 인터페이스를 구현해야 합니다. 이 인터페이스는 클래스에 대상 경로에 대한 액세스를 허용할지 여부를 결정하는 canActivate 메서드가 있어야 함을 규정합니다.
하나의 경로에多个守卫적용할 수 있습니다. 모든 가드 방법이 허용되면 해당 경로에 대한 액세스가 허용됩니다. 하나의 가드 방법이 허용되지 않으면 해당 경로에 대한 액세스가 허용되지 않습니다.
경로 가드 만들기: ng g guard guards/auth
import { Injectable } from "@angular/core"
"@angular/router"에서 가져오기 { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router }
"rxjs"에서 { Observable } 가져오기
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 AuthGuard는 CanActivate를 구현합니다.
생성자(개인 라우터: 라우터) {}
canActivate(): 부울 UrlTree {
// 점프를 구현하는 데 사용됨 return this.router.createUrlTree(["/user/login"])
// 대상 경로에 대한 액세스를 비활성화합니다. return false
//대상 경로에 대한 액세스를 허용합니다. true를 반환합니다.
}
} {
경로: "정보",
구성요소: AboutComponent,
canActivate: [AuthGuard]
} 2. CanActivateChild는
사용자가 특정 하위 경로에 액세스할 수 있는지 확인합니다.
경로 가드 만들기: ng g guard guards/admin 참고: CanActivateChild를 선택하려면 화살표를 이 옵션으로 이동하고 스페이스바를 눌러 선택을 확인하세요.
"@angular/core"에서 { 주입 가능 } 가져오기
"@angular/router"에서 가져오기 { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree }
"rxjs"에서 { Observable } 가져오기
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 AdminGuard는 CanActivateChild를 구현합니다.
canActivateChild(): 부울 UrlTree {
true를 반환
}
} {
경로: "정보",
구성요소: AboutComponent,
canActivateChild: [AdminGuard],
어린이들: [
{
경로: "소개",
구성요소: IntroduceComponent
}
]
} 3. CanDeactivate는
사용자가 경로를 종료할 수 있는지 확인합니다.
예를 들어, 사용자가 양식에 입력한 내용이 저장되지 않은 상태에서 사용자가 경로를 벗어나려는 경우 경비원을 호출하여 사용자에게 알릴 수 있습니다.
"@angular/core"에서 { 주입 가능 } 가져오기
수입 {
비활성화 가능,
활성화된 경로스냅샷,
라우터상태스냅샷,
URL트리
} "@angular/router"에서
"rxjs"에서 { Observable } 가져오기
내보내기 인터페이스 CanComponentLeave {
canLeave: () => 부울
}
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 UnsaveGuard는 CanDeactivate<CanComponentLeave>를 구현합니다.
canDeactivate(컴포넌트: CanComponentLeave): 부울 {
if (comComponent.canLeave()) {
true를 반환
}
거짓을 반환하다
}
} {
길: "",
구성요소: 홈구성요소,
canDeactivate: [UnsaveGuard]
} "src/app/guards/unsave.guard"에서 import { CanComponentLeave }
내보내기 클래스 HomeComponent는 CanComponentLeave를 구현합니다.
myForm: FormGroup = 새 FormGroup({
사용자 이름: 새 FormControl()
})
canLeave(): 부울 {
if (this.myForm.dirty) {
if (window.confirm("저장되지 않은 데이터가 있습니다. 나가시겠습니까?")) {
true를 반환
} 또 다른 {
거짓을 반환하다
}
}
true를 반환
} 4. Resolve를 사용
하면 라우팅을 시작하기 전에 데이터를 얻은 다음 데이터 수집이 완료된 후 라우팅을 시작할 수 있습니다.
ng g resolver <name>
import { Injectable } from "@angular/core"
"@angular/router"에서 { 해결 } 가져오기
type returnType = Promise<{ 이름: 문자열 }>
@주입 가능({
제공됨: "루트"
})
내보내기 클래스 ResolveGuard는 Resolve<returnType> {을 구현합니다.
해결(): 반환 유형 {
return new Promise(함수 (해결) {
setTimeout(() => {
해결({ 이름: "장산" })
}, 2000)
})
}
} {
길: "",
구성요소: 홈구성요소,
해결하다: {
사용자:ResolveGuard
}
} 내보내기 클래스 HomeComponent {
생성자(비공개 경로: ActivatedRoute) {}
ngOnInit(): 무효 {
console.log(this.route.snapshot.data.user)
}
}