Penambahbaikan dalam Sudut dan 15

1) Perkhidmatan Suntikan dalam Angular 14 Tanpa Pembina Menggunakan suntikan.
Sebelum ini, kelas dengan pembina sentiasa diperlukan untuk menyuntik sebarang perkhidmatan:

class MyClass {
  constructor(private myService: MyService) {}
}

Kini, kami boleh menyuntik perkhidmatan dalam kedua-dua fungsi dan kelas. Kita hanya perlu mengisytiharkan pembolehubah dan menetapkannya sama dengan menyuntik dengan nama perkhidmatan di dalam:

const myService = inject(MyService);
Ini berguna, contohnya, dalam pemintas dan pengawal, yang kini biasanya dilakukan dengan fungsi dan bukannya kelas.

2) Teg Penutupan Sendiri untuk Menyimpan Garisan dalam Sudut 15.
Bermula dengan versi ini, anda boleh menggunakan komponen dengan satu tag:

Sebelum ini, adalah perlu untuk membuka dan menutup teg komponen untuk menggunakannya:

3) Kurangkan Import Anda dalam Sudut dengan Mencipta Pintasan.
Daripada mempunyai import yang lama seperti ini:

import { MyComponent } daripada '../../components/my-component';
Anda boleh memendekkan import seperti ini:

import { MyComponent } daripada '@components/my-component';
Untuk mencapai ini, pergi ke fail tsconfig.json dan tambah laluan di bawah sifat compilerOptions. Di dalam laluan, anda boleh mengkonfigurasi pintasan import anda sendiri:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

Syornya ialah jika anda berada dalam komponen dan ingin menggunakan sesuatu yang khusus untuk komponen itu, importnya secara relatif menggunakan ./ untuk mengakses sumber tersebut. Tetapi apabila mengakses folder induk, gunakan pintasan @. Jika ia memberi anda masalah, anda mungkin perlu menutup dan membuka semula Kod Visual Studio. Butiran kecil ini membuat perbezaan dalam memastikan kod teratur yang mungkin.

4) Optimumkan Pemuatan Imej dengan Arahan NgOptimizedImage dalam Sudut 15.
Jika kami mempunyai senarai dengan 15 imej dan mengulanginya seperti biasa menggunakan [src], kami akan menghadapi isu memuatkan kesemua 15 imej serentak apabila aplikasi bermula, yang mengurangkan prestasi:

Untuk membetulkannya, Angular menyediakan arahan NgOptimizedImage. Untuk menggunakannya, hanya importnya:

import { NgOptimizedImage } daripada '@angular/common';
Dan gunakan [ngSrc] bukannya [src]. Ini akan memuatkan imej dengan malas, meningkatkan prestasi. Walau bagaimanapun, arahan itu mempunyai banyak konfigurasi lain. Jika anda hanya mahu memuatkan malas, saya syorkan anda menggunakan atribut loading="lazy", yang merupakan sebahagian daripada standard HTML dan serasi dengan semua penyemak imbas:

Satu pengesyoran: jika anda mempunyai imej utama di bahagian atas menu, jangan tetapkannya kepada pemuatan malas, kerana ia akan menjadi yang pertama dimuatkan apabila apl dibuka. Gunakan ini hanya pada imej yang mungkin muncul di bawah skrol, kerana kami tidak memerlukannya untuk dimuatkan dengan segera.

Ini sangat penting untuk aplikasi awam, seperti apl SSR yang memerlukan SEO yang baik, kerana ia membantu meningkatkan prestasi.

— Nota berdasarkan kursus Angular oleh EfisioDev —

Atas ialah kandungan terperinci Penambahbaikan dalam Sudut dan 15. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!