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

1 Ringkasan

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,

1. Penghala boleh bekerjasama dengan NgModule untuk melaksanakan operasi pemuatan malas (lazy loading) dan pramuat modul (rujuk "Tutorial Siri Permulaan Sudut untuk Penguasaan (11) - Modul (NgModule), Pemuatan Tertunda Modul"
2. Penghala akan Menguruskan kitaran hayat komponen, ia akan bertanggungjawab untuk mencipta dan memusnahkan komponen.

Untuk projek berasaskan AngularCLI baharu, anda boleh menambah AppRoutingModule pada app.component.ts secara lalai melalui pilihan semasa pemula.

2. Penggunaan asas Penghala

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 Terima parameter

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)
});

4 format paparan laluan

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],
})

5 Masalah yang dihadapi semasa penggunaan

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

6. Ringkasan

• 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!