Rumah > Artikel > hujung hadapan web > Analisis ringkas tentang penghalaan pembelajaran sudut
Artikel ini akan membawa anda memahami penghalaan dalam Angular, memperkenalkan penggunaan asas penghalaan dan melihat cara menerima parameter saya harap ia akan membantu semua orang.
Persekitaran:
Angular CLI: 11.0.6
Sudut: 11.0.7
Nod: 12.18.3
npm: 6.14.6
IDE: Kod Visual Studio
Ringkasnya, dalam bar alamat, alamat (URL) yang berbeza sepadan. ke halaman yang berbeza, ini adalah penghalaan. Selain itu, dengan mengklik butang hadapan dan belakang penyemak imbas, penyemak imbas akan menavigasi ke hadapan atau ke belakang dalam sejarah penyemakan imbas anda, sekali lagi berdasarkan penghalaan. [Cadangan tutorial berkaitan: "tutorial sudut"]
Dalam Sudut, Penghala ialah modul bebas, ditakrifkan dalam modul @angular/penghala,
Untuk projek berasaskan AngularCLI baharu, anda boleh menambah AppRoutingModule pada app.component.ts secara lalai melalui pilihan semasa pemula.
2.1 Penyediaan
Kami mula-mula membuat 2 halaman. untuk menggambarkan penggunaan penghalaan:
ng g c page1 ng g c page2
Gunakan arahan AnuglarCLI di atas untuk mencipta 2 komponen, Page1Component dan Page2Component.
2.2 Mendaftar laluan
//src\app\app-routing.module.ts const routes: Routes = [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {}
Seperti yang anda lihat, pendaftaran laluan mudah hanya memerlukan dua atribut, laluan dan komponen, iaitu ditakrifkan secara berasingan Laluan relatif laluan, dan komponen tindak balas laluan ini.
2.3. Penggunaan dalam html
<a routerLink="page1">Page1</a> | <a routerLink="page2">Page2</a>
Dalam templat html, terus gunakan atribut routerLink untuk mengenal pasti laluan sudut. Selepas melaksanakan kod, anda boleh melihat dua hiperpautan, Halaman1 dan Halaman2 Klik untuk melihat bahawa alamat bar alamat ditukar kepada http://localhost:4200/page2 atau http://localhost:4200/page1 dalam halaman1 dan halaman2. Tukar
2.4 Penggunaan dalam kod ts
Kadangkala, perlu melompat berdasarkan logik perniagaan dalam ts. . Dalam ts, tika Penghala perlu disuntik, seperti
constructor(private router: Router) {}
Kod lompat:
// 跳转到 /page1 this.router.navigate(['/page1']); // 跳转到 /page1/123 this.router.navigate(['/page1', 123]);
3.1 Parameter dalam laluan
Secara umumnya, kami menggunakan parameter sebagai bahagian dalam URL, seperti /users/1, yang mewakili pengguna yang mempunyai id 1, dan definisi penghalaan Untuk "/users/id" gaya ini.
Untuk halaman mudah kami, sebagai contoh, halaman page1 kami boleh lulus parameter id, maka kami perlu mengubah suai penghalaan kami kepada:
const routes: Routes = [ { path: 'page1/:id', //接收id参数 component: Page1Component, }, { // 实现可选参数的小技巧。 这个routing处理没有参数的url path: 'page1', redirectTo: 'page1/', // 跳转到'page1/:id' }, { path: 'page2', component: Page2Component, }, ];
Apabila kod ts membaca parameter, ia pertama perlu disuntik ActivatedRoute, kodnya adalah seperti berikut:
constructor(private activatedRoute: ActivatedRoute) {} ngOnInit(): void { this.activatedRoute.paramMap.subscribe((params) => { console.log('Parameter id: ', params.get('id')); // 地址 http://localhost:4200/page1/33 // 控制台输出:Query Parameter name: 33 // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) }); }
3.2 Parameter dalam parameter (QueryParameter)
Di sana. ialah satu lagi cara untuk menulis parameter, seperti http://localhost:4200/?name=cat, iaitu, selepas alamat URL, tambah tanda soal '?', dan kemudian tambah nama parameter dan nilai parameter (' nama=kucing'). Ini dipanggil parameter pertanyaan (QueryParameter).
Apabila mengambil parameter pertanyaan ini, ia adalah serupa dengan parameter penghalaan sebelumnya, kecuali paramMap ditukar kepada queryParamMap Kodnya adalah seperti berikut:
this.activatedRoute.queryParamMap.subscribe((params) => { console.log('Query Parameter name: ', params.get('name')); // 地址 http://localhost:4200/page1?name=cat // 控制台输出:Query Parameter name: cat // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) });
Berbeza daripada tapak statik tulen tradisional (html), URL dalam sudut tidak sepadan dengan fail sebenar (halaman), kerana sudut mengambil alih pemprosesan penghalaan (Penghalaan) untuk menentukan yang mana komponen untuk dipaparkan kepada pengguna akhir. Untuk menyesuaikan diri dengan senario yang berbeza, Angular mempunyai dua format paparan laluan URL:
http://localhost:4200/page1/123
http://localhost:4200/#/page1/123
Lainnya ialah yang pertama, tanpa menambah #. Jika perlu, anda boleh menambah useHash: true
pada app-routing.ts, seperti:
// app-routing.ts @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule], })
Begitu juga, Kerana anuglar. mengambil alih pemprosesan penghalaan (Penghalaan), akan ada teknik (keperluan) yang berbeza apabila digunakan ke pelayan seperti iis, nginx, dll. Untuk rujukan terperinci:
https://github.com/angular-ui /ui- penghala/wiki/Soalan-Lazim#cara-mengkonfigurasi-pelayan-anda-untuk-bekerja-dengan-mod-html5
Angular tidak menyokong penghalaan pilihan secara lalai (cth. /user/:id?), tetapi kami boleh menentukan 2 laluan yang menghala ke Komponen yang sama untuk mencapai ini dan mencapai penggunaan semula kod (atau gunakan redirectTo)
Anda boleh menggunakan parameter useHash untuk menambah # sebelum laluan augular;
Untuk isu penggunaan selepas pembungkusan, semak wifi rasmi (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure- your- server-to-work-with-html5mode)
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !
Atas ialah kandungan terperinci Analisis ringkas tentang penghalaan pembelajaran sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!