Rumah > Artikel > hujung hadapan web > Analisis ringkas laluan pembelajaran sudut mengikut modul
Artikel ini akan membawa anda memahami modul penghalaan dalam sudut, dan memperkenalkan pengetahuan yang berkaitan seperti peraturan padanan, parameter penghalaan, sarang penghalaan, soket bernama, penghalaan navigasi, penghalaan pemuatan malas, dsb. harap ia akan berguna kepada anda Semua orang membantu!
Dalam Angular, penghalaan ialah 以模块为单位
dan setiap modul boleh mempunyai laluannya sendiri. [Tutorial berkaitan disyorkan: "tutorial sudut"]
1. Buat komponen halaman, komponen Reka Letak dan Navigasi komponen , untuk kegunaan penghalaan
BuatHalaman UtamaKomponen halamanng g c pages/home
BuatPerihal kami Komponen Halamanng g c pages/about
Buat Reka LetakKomponenng g c pages/layout
Buat Navigasi Komponenng g c pages/navigation
2 Cipta peraturan penghalaan
// app.module.ts import { Routes } from "@angular/router" const routes: Routes = [ { path: "home", component: HomeComponent }, { path: "about", component: AboutComponent } ]
3. Perkenalkan modul penghalaan dan mulakannya
// app.module.ts import { RouterModule, Routes } from "@angular/router" @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], }) export class AppModule {}
4. Tambah 路由插座
<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --> <router-outlet></router-outlet>
5. Tentukan pautan
<a routerLink="/home">首页</a> <a routerLink="/about">关于我们</a>
1 Ubah hala
const routes: Routes = [ { path: "home", component: HomeComponent }, { path: "about", component: AboutComponent }, { path: "", // 重定向 redirectTo: "home", // 完全匹配 pathMatch: "full" } ]
2 , 404 muka surat
const routes: Routes = [ { path: "home", component: HomeComponent }, { path: "about", component: AboutComponent }, { path: "**", component: NotFoundComponent } ]
1 Parameter pertanyaan
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">关于我们</a>
import { ActivatedRoute } from "@angular/router" export class AboutComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { this.route.queryParamMap.subscribe(query => { query.get("name") }) } }
Parameter dinamik
const routes: Routes = [ { path: "home", component: HomeComponent }, { path: "about/:name", component: AboutComponent } ]
<a [routerLink]="['/about', 'zhangsan']">关于我们</a>
import { ActivatedRoute } from "@angular/router" export class AboutComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { this.route.paramMap.subscribe(params => { params.get("name") }) } }
Sarang laluan merujuk kepada cara 定义子级路由
.
const routes: Routes = [ { path: "about", component: AboutComponent, children: [ { path: "introduce", component: IntroduceComponent }, { path: "history", component: HistoryComponent } ] } ]
<!-- about.component.html --> <app-layout> <p>about works!</p> <a routerLink="/about/introduce">公司简介</a> <a routerLink="/about/history">发展历史</a> <div> <router-outlet></router-outlet> </div> </app-layout>
Daftar Dinamakan
Dedahkan komponen penghalaan kanak-kanak ke dalam saluran penghalaan yang berbeza .
{ path: "about", component: AboutComponent, children: [ { path: "introduce", component: IntroduceComponent, outlet: "left" }, { path: "history", component: HistoryComponent, outlet: "right" } ] }
<!-- about.component.html --> <app-layout> <p>about works!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<a [routerLink]="[ '/about', { outlets: { left: ['introduce'], right: ['history'] } } ]" >关于我们 </a>
<!-- app.component.html --> <button (click)="jump()">跳转到发展历史</button>
// app.component.ts import { Router } from "@angular/router" export class HomeComponent { constructor(private router: Router) {} jump() { this.router.navigate(["/about/history"], { queryParams: { name: "Kitty" } }) } }
, dan kemudian perkenalkan modul penghalaan akar dalam modul akar. 根路由模块
import { NgModule } from "@angular/core" import { HomeComponent } from "./pages/home/home.component" import { NotFoundComponent } from "./pages/not-found/not-found.component" const routes: Routes = [ { path: "", component: HomeComponent }, { path: "**", component: NotFoundComponent } ] @NgModule({ declarations: [], imports: [RouterModule.forRoot(routes, { useHash: true })], // 导出 Angular 路由功能模块,因为在根模块的根组件中使用了 RouterModule 模块中提供的路由插座组件 exports: [RouterModule] }) export class AppRoutingModule {}
import { BrowserModule } from "@angular/platform-browser" import { NgModule } from "@angular/core" import { AppComponent } from "./app.component" import { AppRoutingModule } from "./app-routing.module" import { HomeComponent } from "./pages/home/home.component" import { NotFoundComponent } from "./pages/not-found/not-found.component" @NgModule({ declarations: [AppComponent,HomeComponent, NotFoundComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
. 模块
dan cipta modul penghalaan modul ini bersama-sama ng g m user --routing=true
ng g c user/pages/login
ng g c user/pages/register
import { NgModule } from "@angular/core" import { Routes, RouterModule } from "@angular/router" import { LoginComponent } from "./pages/login/login.component" import { RegisterComponent } from "./pages/register/register.component" const routes: Routes = [ { path: "login", component: LoginComponent }, { path: "register", component: RegisterComponent } ] @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class UserRoutingModule {}5 Kaitkan modul penghalaan pengguna
// app-routing.module.ts const routes: Routes = [ { path: "user", loadChildren: () => import("./user/user.module").then(m => m.UserModule) } ]6. Tambahkan pautan akses dalam komponen navigasi
<a routerLink="/user/login">登录</a> <a routerLink="/user/register">注册</a>
Pengawal laluan akan memberitahu laluan sama ada navigasi ke laluan yang diminta dibenarkan.
atau boolean
atau Observable 78180fd7e2f5f09e138c95a71ada14e6
, yang memutuskan kepada nilai boolean pada satu ketika pada masa hadapan. Promise 78180fd7e2f5f09e138c95a71ada14e6
1. CanActivate
Semak pengguna. 是否可以访问某一个路由
, kelas pengawal laluan mesti melaksanakan antara muka ini, yang menetapkan bahawa kelas perlu mempunyai kaedah canActivate, yang menentukan sama ada untuk membenarkan akses kepada laluan sasaran. 为接口
Hanya jika semua kaedah guard dibenarkan, laluan dibenarkan untuk diakses Jika satu kaedah guard tidak dibenarkan, maka laluan tersebut tidak dibenarkan untuk diakses. 多个守卫
ng g guard guards/auth
import { Injectable } from "@angular/core" import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from "@angular/router" import { Observable } from "rxjs" @Injectable({ providedIn: "root" }) export class AuthGuard implements CanActivate { constructor(private router: Router) {} canActivate(): boolean | UrlTree { // 用于实现跳转 return this.router.createUrlTree(["/user/login"]) // 禁止访问目标路由 return false // 允许访问目标路由 return true } }
{ path: "about", component: AboutComponent, canActivate: [AuthGuard] }
2. CanActivateChild
semak. Sama ada pengguna boleh mengakses sub-laluan tertentu.
Buat pengawal laluan: Nota: Untuk memilih CanActivateChild, anda perlu mengalihkan anak panah ke pilihan ini dan ketik ruang untuk mengesahkan pemilihan. ng g guard guards/admin
import { Injectable } from "@angular/core" import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router" import { Observable } from "rxjs" @Injectable({ providedIn: "root" }) export class AdminGuard implements CanActivateChild { canActivateChild(): boolean | UrlTree { return true } }
{ path: "about", component: AboutComponent, canActivateChild: [AdminGuard], children: [ { path: "introduce", component: IntroduceComponent } ] }
3. Boleh Nyahaktifkan
Semak sama ada pengguna boleh keluar dari laluan.
Sebagai contoh, jika kandungan yang dimasukkan oleh pengguna dalam borang tidak disimpan dan pengguna ingin meninggalkan laluan, pengawal boleh dipanggil untuk menggesa pengguna.import { Injectable } from "@angular/core" import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router" import { Observable } from "rxjs" export interface CanComponentLeave { canLeave: () => boolean } @Injectable({ providedIn: "root" }) export class UnsaveGuard implements CanDeactivate<CanComponentLeave> { canDeactivate(component: CanComponentLeave): boolean { if (component.canLeave()) { return true } return false } }
{ path: "", component: HomeComponent, canDeactivate: [UnsaveGuard] }
import { CanComponentLeave } from "src/app/guards/unsave.guard" export class HomeComponent implements CanComponentLeave { myForm: FormGroup = new FormGroup({ username: new FormControl() }) canLeave(): boolean { if (this.myForm.dirty) { if (window.confirm("有数据未保存, 确定要离开吗")) { return true } else { return false } } return true }
4. Resolve
membenarkan untuk mendapatkan data sebelum memasuki laluan dan tunggu untuk data Selepas pemerolehan selesai, masukkan penghalaan.
ng g resolver 8a11bc632ea32a57b3e3693c7987c420
import { Injectable } from "@angular/core" import { Resolve } from "@angular/router" type returnType = Promise<{ name: string }> @Injectable({ providedIn: "root" }) export class ResolveGuard implements Resolve<returnType> { resolve(): returnType { return new Promise(function (resolve) { setTimeout(() => { resolve({ name: "张三" }) }, 2000) }) } }
{ path: "", component: HomeComponent, resolve: { user: ResolveGuard } }
export class HomeComponent { constructor(private route: ActivatedRoute) {} ngOnInit(): void { console.log(this.route.snapshot.data.user) } }Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Video Pengaturcaraan! !
Atas ialah kandungan terperinci Analisis ringkas laluan pembelajaran sudut mengikut modul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!