Di Angular, perutean以模块为单位, dan setiap modul dapat memiliki peruteannya sendiri. [Rekomendasi tutorial terkait: "tutorial sudut"]
1. Buat komponen halaman, komponen Tata Letak, dan komponen Navigasi untuk penggunaan perutean
Buat komponen halaman beranda ng gc pages/home
Buat komponen halaman tentang kami ng gc pages/about
Buat komponen tata letak ng gc pages/layout
Buat komponen navigasi ng gc pages/navigation
2. Buat aturan perutean
// app.module. ts
impor { Rute } dari "@angular/router"
rute const: Rute = [
{
jalur: "rumah",
komponen: Komponen Rumah
},
{
jalur: "tentang",
komponen: Tentang Komponen
}
] 3. Perkenalkan modul perutean dan mulai
// app.module.ts
impor { RouterModule, Rute } dari "@angular/router"
@NgModule({
impor: [RouterModule.forRoot(rute, { useHash: true })],
})
kelas ekspor AppModule {} 4. Tambahkan路由插座
<!-- Soket perutean, yaitu komponen perutean yang cocok dengan komponen placeholder akan ditampilkan di sini --> <router-outlet></router-outlet>5. Tentukan tautan
<a routerLink="/home">Beranda</a>
di komponen navigasi
<a routerLink="/about">Tentang Kami</a>
1. Pengalihan
rute const: Rute = [
{
jalur: "rumah",
komponen: Komponen Rumah
},
{
jalur: "tentang",
komponen: Tentang Komponen
},
{
jalur: "",
// Redirect redirectKe: "rumah",
//Jalur pencocokan tepat Cocok: "penuh"
}
] 2. 404 halaman
rute const: Rute = [
{
jalur: "rumah",
komponen: Komponen Rumah
},
{
jalur: "tentang",
komponen: Tentang Komponen
},
{
jalur: "**",
komponen: NotFoundComponent
}
] 1. Parameter kueri
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">Tentang kami</a> impor { ActivatedRoute } dari "@angular/router"
kelas ekspor AboutComponent mengimplementasikan OnInit {
konstruktor(rute pribadi: ActivatedRoute) {}
ngOnInit(): batal {
this.route.queryParamMap.subscribe(query => {
query.mendapatkan("nama")
})
}
} 2. Parameter dinamis
rute const: Rute = [
{
jalur: "rumah",
komponen: Komponen Rumah
},
{
jalur: "tentang/:nama",
komponen: Tentang Komponen
}
] <a [routerLink]="['/about', 'zhangsan']">Tentang kami</a>
impor { ActivatedRoute } dari "@angular/router"
kelas ekspor AboutComponent mengimplementasikan OnInit {
konstruktor(rute pribadi: ActivatedRoute) {}
ngOnInit(): batal {
this.route.paramMap.subscribe(params => {
params.get("nama")
})
}
} Pengumpulan rute mengacu pada cara定义子级路由.
rute const: Rute = [
{
jalur: "tentang",
komponen: Tentang Komponen,
anak-anak: [
{
jalur: "memperkenalkan",
komponen: Perkenalkan Komponen
},
{
jalur: "sejarah",
komponen: Komponen Sejarah
}
]
}
] <!-- tentang.component.html -->
<tata letak aplikasi>
<p>tentang karya!</p>
<a routerLink="/about/introduce">Profil Perusahaan</a>
<a routerLink="/about/history">Riwayat Perkembangan</a>
<div>
<router-outlet></router-outlet>
</div>
</app-layout> Beri nama soketnya
Ekspos komponen perutean anak ke outlet perutean yang berbeda.
{
jalur: "tentang",
komponen: Tentang Komponen,
anak-anak: [
{
jalur: "memperkenalkan",
komponen: Perkenalkan Komponen,
outlet: "kiri"
},
{
jalur: "sejarah",
komponen: Komponen Sejarah,
outlet: "benar"
}
]
} <!-- tentang.component.html --> <tata letak aplikasi> <p>tentang karya!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </tata letak-aplikasi>
<a
[routerLink]="[
'/tentang',
{
outlet: {
kiri: ['perkenalkan'],
kanan: ['sejarah']
}
}
]"
>Tentang kami</a> <!-- aplikasi.component.html --> <button (click)="jump()">Lompat ke riwayat pengembangan</button>
// app.component.ts
impor { Router } dari "@angular/router"
kelas ekspor Komponen Rumah {
konstruktor(router pribadi: Router) {}
melompat() {
this.router.navigate(["/about/history"], {
queryParams: {
nama: "Kucing"
}
})
}
} Abstrak konfigurasi perutean dalam modul root ke dalam modul perutean terpisah, yang disebut根路由模块, dan kemudian memasukkan modul perutean root ke dalam modul root.
impor { NgModule } dari "@angular/core"
impor { HomeComponent } dari "./pages/home/home.component"
impor { NotFoundComponent } dari "./pages/not-found/not-found.component"
rute const: Rute = [
{
jalur: "",
komponen: Komponen Rumah
},
{
jalur: "**",
komponen: NotFoundComponent
}
]
@NgModule({
deklarasi: [],
impor: [RouterModule.forRoot(rute, { useHash: true })],
// Ekspor modul fungsi routing Angular, karena komponen soket routing yang disediakan dalam modul RouterModule digunakan dalam komponen root dari ekspor modul root: [RouterModule]
})
ekspor kelas AppRoutingModule {} impor { BrowserModule } dari "@angular/platform-browser"
impor { NgModule } dari "@angular/core"
impor {AppComponent} dari "./app.component"
impor { AppRoutingModule } dari "./app-routing.module"
impor { HomeComponent } dari "./pages/home/home.component"
impor { NotFoundComponent } dari "./pages/not-found/not-found.component"
@NgModule({
deklarasi: [AppComponent, HomeComponent, NotFoundComponent],
impor: [BrowserModule, AppRoutingModule],
penyedia: [],
bootstrap: [Komponen Aplikasi]
})
ekspor kelas AppModule {} Pemuatan rute yang lambat didasarkan pada模块.
1. Buat modul pengguna ng gm user --routing=true dan buat modul perutean modul ini bersama-sama.
2. Buat komponen halaman login ng gc user/pages/login
3. Buat komponen halaman registrasi ng gc user/pages/register
4. Aturan Perutean Konfigurasi untuk modul pengguna
impor { NgModule } dari "@angular/core"
impor { Rute, RouterModule } dari "@angular/router"
impor { LoginComponent } dari "./pages/login/login.component"
impor { RegisterComponent } dari "./pages/register/register.component"
rute const: Rute = [
{
jalur: "masuk",
komponen: LoginComponent
},
{
jalur: "daftar",
komponen: Daftarkan Komponen
}
]
@NgModule({
impor: [RouterModule.forChild(rute)],
ekspor: [RouterModule]
})
kelas ekspor UserRoutingModule {} 5. Kaitkan modul perutean pengguna ke modul perutean utama
// app-routing.module.ts
rute const: Rute = [
{
jalur: "pengguna",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
] 6. Tambahkan link akses <a routerLink="/user/login">Login</a>
di komponen navigasi
<a routerLink="/user/register">Daftar</a>
Penjaga rute memberi tahu rute apakah navigasi ke rute yang diminta diperbolehkan.
Metode penjaga rute dapat mengembalikan boolean atau Observable <boolean> atau Promise <boolean> , yang akan menghasilkan nilai Boolean di masa mendatang.
1. CanActivate
memeriksa是否可以访问某一个路由.
CanActivate为接口, dan kelas penjaga rute harus mengimplementasikan antarmuka ini. Antarmuka ini menetapkan bahwa kelas tersebut harus memiliki metode canActivate, yang menentukan apakah akan mengizinkan akses ke rute target.
Suatu rute dapat menerapkan多个守卫. Jika semua metode penjagaan diperbolehkan, maka rute tersebut diperbolehkan untuk diakses. Jika satu metode penjagaan tidak diperbolehkan, maka rute tersebut tidak diperbolehkan untuk diakses.
Buat penjaga rute: ng g guard guards/auth
import { Injectable } dari "@angular/core"
impor { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } dari "@angular/router"
impor {Dapat Diamati } dari "rxjs"
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor AuthGuard mengimplementasikan CanActivate {
konstruktor(router pribadi: Router) {}
canActivate(): boolean |.UrlTree {
// Digunakan untuk mengimplementasikan jump return this.router.createUrlTree(["/user/login"])
// Nonaktifkan akses ke rute target, kembalikan salah
//Izinkan akses ke rute target mengembalikan nilai true
}
} {
jalur: "tentang",
komponen: Tentang Komponen,
dapat Mengaktifkan: [AuthGuard]
} 2. CanActivateChild
memeriksa apakah pengguna dapat mengakses sub-rute tertentu.
Buat penjaga rute: ng g guard guards/admin Catatan: Untuk memilih CanActivateChild, pindahkan panah ke opsi ini dan ketuk spasi untuk mengonfirmasi pilihan.
impor { Suntikan } dari "@angular/core"
impor { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } dari "@angular/router"
impor {Dapat Diamati } dari "rxjs"
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor AdminGuard mengimplementasikan CanActivateChild {
canActivateChild(): boolean |.UrlTree {
kembali benar
}
} {
jalur: "tentang",
komponen: Tentang Komponen,
dapatActivateChild: [AdminGuard],
anak-anak: [
{
jalur: "memperkenalkan",
komponen: Perkenalkan Komponen
}
]
} 3. CanDeactivate
memeriksa apakah pengguna dapat keluar dari rute.
Misalnya, jika konten yang dimasukkan oleh pengguna dalam formulir tidak disimpan dan pengguna ingin keluar dari rute, penjaga dapat dipanggil untuk meminta pengguna.
impor { Suntikan } dari "@angular/core"
impor {
Dapat Menonaktifkan,
Snapshot Rute yang Diaktifkan,
RouterStateSnapshot,
Pohon Url
} dari "@angular/router"
impor {Dapat Diamati } dari "rxjs"
ekspor antarmuka CanComponentLeave {
canLeave: () => boolean
}
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor UnsaveGuard mengimplementasikan CanDeactivate<CanComponentLeave> {
canDeactivate(komponen: CanComponentLeave): boolean {
if (komponen.canLeave()) {
kembali benar
}
kembali salah
}
} {
jalur: "",
komponen: Komponen Rumah,
dapat menonaktifkan: [Batalkan Penyimpanan]
} impor { CanComponentLeave } dari "src/app/guards/unsave.guard"
kelas ekspor HomeComponent mengimplementasikan CanComponentLeave {
myForm: FormGroup = FormGroup baru({
nama pengguna: FormControl baru()
})
canLeave(): boolean {
if (ini.Bentukku.kotor) {
if (window.confirm("Ada data yang belum disimpan, apakah Anda yakin ingin keluar?")) {
kembali benar
} kalau tidak {
kembali salah
}
}
kembali benar
} 4. Resolve
memungkinkan Anda memperoleh data sebelum memasukkan perutean, dan kemudian memasukkan perutean setelah akuisisi data selesai.
ng g resolver <name>
import { Suntik } dari "@angular/core"
impor { Selesaikan } dari "@angular/router"
ketik returnType = Janji<{ nama: string }>
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor ResolveGuard mengimplementasikan Resolve<returnType> {
tekad(): returnType {
kembalikan Janji baru(fungsi (tekad) {
setWaktu habis(() => {
tekad({ nama: "Zhang San" })
}, 2000)
})
}
} {
jalur: "",
komponen: Komponen Rumah,
menyelesaikan: {
pengguna:ResolveGuard
}
} kelas ekspor Komponen Utama {
konstruktor(rute pribadi: ActivatedRoute) {}
ngOnInit(): batal {
console.log(ini.rute.snapshot.data.pengguna)
}
}