В Angular маршрутизация以模块为单位, и каждый модуль может иметь свою собственную маршрутизацию. [Рекомендация по соответствующему руководству: «Учебное пособие по Angular»]
1. Создайте компоненты страницы, компоненты макета и компоненты навигации для использования в маршрутизации.
Создайте компонент домашней страницы ng gc pages/home
Создайте компонент страницы «О нас» ng gc pages/about
Создайте компонент макета ng gc pages/layout
Создайте компонент навигации ng gc pages/navigation
2. Создайте правила маршрутизации
// app.module. тс
импортировать {Маршруты} из "@angular/router"
константные маршруты: Маршруты = [
{
путь: "домой",
компонент:HomeComponent
},
{
путь: «о»,
компонент: ОКомпонент
}
] 3. Внедряем модуль маршрутизации и запускаем
//app.module.ts
импортировать { RouterModule, Routes } из "@angular/router"
@NgModule({
импорт: [RouterModule.forRoot(routes, {useHash: true })],
})
класс экспорта AppModule {} 4. Добавьте路由插座
<!-- Здесь будет отображаться сокет маршрутизации, то есть компонент маршрутизации, соответствующий компоненту-заполнителю --> <router-outlet></router-outlet>5. Определите ссылку
<a routerLink="/home">Домашняя страница</a>
в компоненте навигации.
<a routerLink="/about">О нас</a>
1. Перенаправление
константные маршруты: Маршруты = [
{
путь: "домой",
компонент:HomeComponent
},
{
путь: «о»,
компонент: ОКомпонент
},
{
путь: "",
// Перенаправление redirectTo: "домой",
//Точный путь совпаденияMatch: "full"
}
] 2. Константные маршруты страницы 404
: Маршруты = [
{
путь: "домой",
компонент:HomeComponent
},
{
путь: «о»,
компонент: ОКомпонент
},
{
путь: "**",
компонент: NotFoundComponent
}
] 1. Параметры запроса
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">О нас</a> import { ActivatedRoute } из "@angular/router"
класс экспорта AboutComponent реализует OnInit {
конструктор (частный маршрут: ActivatedRoute) {}
ngOnInit(): пустота {
this.route.queryParamMap.subscribe(query => {
query.get("имя")
})
}
} 2. Динамические параметры
константных маршрутов: Routes = [
{
путь: "домой",
компонент:HomeComponent
},
{
путь: "о/:имя",
компонент: ОКомпонент
}
] <a [routerLink]="['/about', 'zhangsan']">О нас</a>
import { ActivatedRoute } from "@angular/router"
класс экспорта AboutComponent реализует OnInit {
конструктор (частный маршрут: ActivatedRoute) {}
ngOnInit(): пустота {
this.route.paramMap.subscribe(params => {
params.get("имя")
})
}
} Вложенность маршрутов относится к定义子级路由.
константные маршруты: Маршруты = [
{
путь: «о»,
компонент: ОКомпонент,
дети: [
{
путь: «представить»,
компонент: IntroduceComponent
},
{
путь: "история",
компонент: HistoryComponent
}
]
}
] <!-- about.comComponent.html -->
<макет приложения>
<p>о работах!</p>
<a routerLink="/about/introduce">Профиль компании</a>
<a routerLink="/about/history">История разработки</a>
<дел>
<роутер-выход></роутер-выход>
</div>
</app-layout> Назовите сокет
Размещайте дочерние компоненты маршрутизации в различных точках маршрутизации.
{
путь: «о»,
компонент: ОКомпонент,
дети: [
{
путь: «представить»,
компонент: IntroduceComponent,
выход: «левый»
},
{
путь: "история",
компонент: HistoryComponent,
выход: «правильный»
}
]
} <!-- about.comComponent.html --> <макет приложения> <p>о работах!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<а
[маршрутизатор]="[
'/о',
{
торговые точки: {
слева: ['представить'],
правильно: ['история']
}
}
]"
>О нас</a> <!-- app.comComponent.html --> <button (click)="jump()">Перейти к истории разработки</button>
// app.comComponent.ts
импортировать {Маршрутизатор} из "@angular/router"
класс экспорта HomeComponent {
конструктор (частный маршрутизатор: Маршрутизатор) {}
прыжок() {
this.router.navigate(["/about/history"], {
запросПарамс: {
имя: "Китти"
}
})
}
} Вынесите конфигурацию маршрутизации в корневом модуле в отдельный модуль маршрутизации, называемый根路由模块, а затем добавьте корневой модуль маршрутизации в корневой модуль.
импортировать { NgModule } из "@angular/core"
импортировать { HomeComponent } из "./pages/home/home.comComponent"
импортировать { NotFoundComponent } из "./pages/not-found/not-found.comComponent"
константные маршруты: Маршруты = [
{
путь: "",
компонент:HomeComponent
},
{
путь: "**",
компонент: NotFoundComponent
}
]
@NgModule({
объявления: [],
импорт: [RouterModule.forRoot(routes, {useHash: true })],
// Экспортируем модуль функции маршрутизации Angular, поскольку компонент сокета маршрутизации, предоставленный в модуле RouterModule, используется в корневом компоненте экспорта корневого модуля: [RouterModule]
})
экспортировать класс AppRoutingModule {} импортировать { BrowserModule } из "@angular/platform-browser"
импортировать { NgModule } из "@angular/core"
импортируйте {AppComponent} из "./app.comComponent"
импортировать { AppRoutingModule } из "./app-routing.module"
импортировать { HomeComponent } из "./pages/home/home.comComponent"
импортировать { NotFoundComponent } из "./pages/not-found/not-found.comComponent"
@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
4. Правила маршрутизации конфигурации для пользовательских модулей
import { NgModule } из "@angular/core"
import { Routes, RouterModule } из "@angular/router"
импортировать { LoginComponent } из "./pages/login/login.comComponent"
импортировать { RegisterComponent } из "./pages/register/register.comComponent"
константные маршруты: Маршруты = [
{
путь: «логин»,
компонент: LoginComponent
},
{
путь: «зарегистрироваться»,
компонент: РегистрКомпонент
}
]
@NgModule({
импорт: [RouterModule.forChild(маршруты)],
экспорт: [RouterModule]
})
класс экспорта UserRoutingModule {} 5. Свяжите модуль маршрутизации пользователей с основным модулем маршрутизации
// app-routing.module.ts
константные маршруты: Маршруты = [
{
путь: "пользователь",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
] 6. Добавьте ссылку доступа <a routerLink="/user/login">Войти</a>
в компонент навигации.
<a routerLink="/user/register">Зарегистрировать</a>
Охранник маршрута сообщает маршруту, разрешена ли навигация по запрошенному маршруту.
Методы защиты маршрута могут возвращать boolean или Observable <boolean> или Promise <boolean> , которые в какой-то момент в будущем преобразуются в логическое значение.
1. CanActivate
проверяет是否可以访问某一个路由.
CanActivate为接口, и класс защиты маршрута должен реализовывать этот интерфейс. Этот интерфейс предусматривает, что класс должен иметь метод canActivate, который определяет, разрешить ли доступ к целевому маршруту.
К маршруту может применяться多个守卫. Если разрешены все методы защиты, доступ к маршруту разрешен. Если один из методов защиты не разрешен, доступ к маршруту запрещен.
Создайте защиту маршрута: ng g guard guards/auth
Import {Injectable} from "@angular/core"
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } из "@angular/router"
импортировать { Observable } из "rxjs"
@Инъекционный({
предоставлено: "корень"
})
класс экспорта AuthGuard реализует CanActivate {
конструктор (частный маршрутизатор: Маршрутизатор) {}
canActivate(): логическое значение | UrlTree {
// Используется для реализации перехода. return this.router.createUrlTree(["/user/login"])
// Запретить доступ к целевому маршруту return false
//Разрешаем доступ к целевому маршруту, возвращаем true
}
} {
путь: «о»,
компонент: ОКомпонент,
canActivate: [AuthGuard]
} 2. CanActivateChild
проверяет, может ли пользователь получить доступ к определенному подмаршруту.
Создайте охрану маршрута: ng g guard guards/admin Примечание. Чтобы выбрать CanActivateChild, переместите стрелку к этому параметру и коснитесь пробела, чтобы подтвердить выбор.
import { Injectable } из "@angular/core"
импортировать { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } из "@angular/router"
импортировать { Observable } из "rxjs"
@Инъекционный({
предоставлено: "корень"
})
класс экспорта AdminGuard реализует CanActivateChild {
canActivateChild(): логическое значение UrlTree {
вернуть истину
}
} {
путь: «о»,
компонент: ОКомпонент,
canActivateChild: [AdminGuard],
дети: [
{
путь: «представить»,
компонент: IntroduceComponent
}
]
} 3. CanDeactivate
проверяет, может ли пользователь выйти из маршрута.
Например, если содержимое, введенное пользователем в форму, не сохраняется и пользователь хочет сойти с маршрута, можно вызвать охранника, чтобы подсказать пользователю.
import { Injectable } из "@angular/core"
импортировать {
Можно Деактивировать,
Активированный снимок маршрута,
Снимок состояния маршрутизатора,
URLTree
} из "@angular/router"
импортировать { Observable } из "rxjs"
интерфейс экспорта CanComponentLeave {
canLeave: () => логическое значение
}
@Инъекционный({
предоставлено: "корень"
})
класс экспорта UnsaveGuard реализует CanDeactivate<CanComponentLeave> {
canDeactivate (компонент: CanComponentLeave): логическое значение {
если (компонент.canLeave()) {
вернуть истину
}
вернуть ложь
}
} {
путь: "",
компонент: HomeComponent,
canDeactivate: [UnsaveGuard]
} import { CanComponentLeave } из "src/app/guards/unsave.guard"
класс экспорта HomeComponent реализует CanComponentLeave {
myForm: FormGroup = новая FormGroup({
имя пользователя: новый FormControl()
})
canLeave(): логическое значение {
если (this.myForm.dirty) {
if (window.confirm("Есть данные, которые не были сохранены, вы уверены, что хотите выйти?")) {
вернуть истину
} еще {
вернуть ложь
}
}
вернуть истину
} 4. Resolve
позволяет получить данные перед вводом маршрутизации, а затем ввести маршрут после завершения сбора данных.
ng g resolver <name>
import { Injectable } from "@angular/core"
импортировать {Resolve} из "@angular/router"
тип returnType = Promise<{ name: string }>
@Инъекционный({
предоставлено: "корень"
})
класс экспорта ResolveGuard реализует Resolve<returnType> {
разрешить(): returnType {
вернуть новое обещание (функция (решить) {
setTimeout(() => {
solve({ name: "Чжан Сан" })
}, 2000)
})
}
} {
путь: "",
компонент: HomeComponent,
решать: {
пользователь:ResolveGuard
}
} класс экспорта HomeComponent {
конструктор (частный маршрут: ActivatedRoute) {}
ngOnInit(): пустота {
console.log(this.route.snapshot.data.user)
}
}