Açısal 16.1: Küçük sürüm küçük ama güzel
16.1 sürümünde, Angular JavaScript çerçevesi ilk dikkate değer yeniliği getiriyor transform-Fonksiyonu @Input dekoratörler. Bu, Angular’ın bir değeri gerçek değişkene atamadan önce başka bir türe dönüştürmesini sağlar. için de haberler var. HttpCliento şimdi kiminle fetch yönetebilmek.
Yeni dönüştürme işlevini kullanma
ONLAR transformİşlev, öncelikle veri türü dönüştürme için tasarlanmıştır. Daha fazla mantığa ihtiyacınız varsa, yine de dosyayı kullanmalısınız. OnChanges Yaşam döngüsü kancasını kullanın.
@Component({
selector: 'app-customers',
template: `<p>Selecting customer {{id}}</p>`,
standalone: true,
})
export class CustomersComponent {
// Route: /customers/:id
@Input({transform: (value: string) => Number(value)}) id: number = 0;
}
Parametreleri doğrudan yönlendirme yeteneği @Input-Ata değişkeni bu yeni özelliği gerektirir. Yol parametre ataması yalnızca sürüm 16’dan beri mevcuttur.
Bu yol parametreleri her zaman türdendir string. Böyle bir parametre çoğunlukla bir varlığın kimliği olduğundan, bunun bir veri türü olmasını istersiniz. number kullanım. Bugüne kadar, ikisinden biri vardı setteryöntemi veya yukarıdaki gerekli Yaşam Döngüsü Kancası.
transform bir üst bileşenin çocuklarına bir değer ilettiği orijinal senaryoya uygun değildir. Teknik olarak mümkündür, ancak bileşenler arasında iletişim kurarken herhangi bir veri türünü kullanma olasılığı her zaman vardır.
HttpClient getirmeyi kullanmayı öğrenir
İkinci ek, konuyla ilgili HttpClient. Bu artık dahili olarak gerçekleşebilir xhr Ayrıca fetch kullanım.
ONLAR HttpClient tüm tarayıcıların sahip olmadığı bir zamandan geliyor fetch halledebilirdi. Ancak bu arada bu durum düzeldi.
Göze çarpmayan bir ayrıntı gibi görünen şey, arka uçta büyük bir rahatlama anlamına gelir. Angular, Sunucu Tarafı Oluşturma (SSR) ile etkinse, Node.js artık yerel olarak yapabilir fetch kullanım. Bugüne kadar her zaman harici kütüphanelere geçmek gerekli olmuştur. xhr tedarik.
İçin destek fetch yapılandırma yoluyla ayarlanmalıdır:
export const appRoutes = [{
path: 'xhr',
providers: [provideHttpClient()],
component: XhrComponent,
}, {
path: 'fetch',
providers: [provideHttpClient(withFetch())],
component: FetchComponent,
}];
Yukarıdaki örnek, iki örnek sağlar HttpClient. Ancak normalde, geliştiriciler bir örnek sağlar ve bunun için main.ts’yi kullanır.
Yeni direktifler
Ek olarak, Angular 16.1’in piyasaya sürülmesinden kısa bir süre sonra iki RFC biçiminde başka yenilikler de vardı.
Örneğin, kontrol akışını kontrol eden “zone.js’den sonraki süre” için yeni direktifler ve sözdizimi olacaktır. Bu, örneğin *ngIf VEYA *ngFor.
Ayrıca, bir defer-Bileşenleri dinamik olarak yüklemek için bir yönerge verin. Yükleme durumuna bağlı olarak, yükleme veya hata durumu için özel bir HTML kodu tanımlayabilirsiniz. Bu özellik dem suspense-React’e çok benzer özellik.
Bir blog gönderisinde ve GitHub deposunda Angular 16.1 hakkında daha fazla bilgi edinin.
(Mayıs)
Haberin Sonu