Sintaks Templat Dipertingkat Sudut dan Migrasi Diperkemas

Angular 18.2 telah tiba, dan walaupun ia mungkin keluaran kecil, ia memegang beberapa peningkatan berharga yang meningkatkan pengalaman pembangun. Artikel ini menyelidiki ciri menarik ini, memfokuskan pada sintaks @let yang diperhalusi dan pengenalan skema migrasi baharu.

@let Meningkatkan

Sintaks @let, kegemaran peribadi di kalangan banyak pembangun Angular, terus berkembang dalam 18.2. Ia menawarkan dua pendekatan berbeza untuk mentakrifkan pembolehubah templat, memberikan fleksibiliti dan kebolehbacaan yang lebih besar kepada kod anda:

Dinamik @let: Terima kebolehan untuk menggunakan pembolehubah rujukan templat dalam arahan @for dan @if. Bayangkan dengan mudah mengakses nilai borang dalam templat:

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let: Dalam versi terdahulu, mengakses nilai terkini yang dipancarkan daripada yang boleh diperhatikan memerlukan arahan ngIf.

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

Sekarang, capai hasil yang sama dengan garisan yang lebih sedikit dan kejelasan yang dipertingkatkan

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

Ingat, pembolehubah @let adalah baca sahaja dan tidak boleh ditugaskan semula. Walau bagaimanapun, nilai mereka akan dikemas kini secara automatik dengan setiap kitaran pengesanan perubahan. Walaupun menggunakan nama yang sama dalam templat dan komponen kelas secara teknikal mungkin, implikasi jangka panjang amalan ini memerlukan penerokaan lanjut.

Penghijrahan Dipermudahkan: Skema Baharu di Bandar

Bermula dengan Angular 17, kami menemui tiga skema migrasi utama:

• Templat aliran kawalan sintaks: ng g @angular/core:control-flow
• Pembina apl baharu: ng kemas kini @angular/cli --name use-application-builder
• Komponen kendiri: ng g @angular/core:standalone

Angular 18.2 mengembangkan kit alat ini dengan alat yang lebih berguna:

• Penukaran laluan komponen kendiri: Buat laluan malas-muat daripada komponen kendiri dengan mudah menggunakan ng g @angular/core:route-lazy-loading.
• Penghijrahan DI: Permudahkan peralihan daripada suntikan kebergantungan berasaskan pembina kepada pendekatan inject() berfungsi baharu dengan ng g @angular/core:inject-migration.

Kesimpulan dan Pandangan Ke Hadapan

Angular 18.2 mungkin keluaran kecil, tetapi ia menawarkan peningkatan yang ketara bagi mereka yang gemar bekerja dengan @let dan menghargai proses migrasi yang diperkemas. Memandangkan kami tidak sabar-sabar menjangkakan ciri utama yang dirancang untuk Angular 19 pada November 2024, versi 18.3, yang akan tiba dalam enam minggu akan datang, menjanjikan satu lagi batu loncatan yang menarik. Jadi, bertenang, teruskan pengekodan dan terima kemajuan dalam Angular!

Atas ialah kandungan terperinci Sintaks Templat Dipertingkat Sudut dan Migrasi Diperkemas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!