@loading, @error ve @placeholder blokları

Ertelenebilir görünümler, farklı yükleme durumlarında gösterilecek içerikleri tanımlamanıza olanak tanır.

Blok Açıklama
@placeholder Varsayılan olarak, defer blokları tetiklenmeden önce herhangi bir içerik render etmez. @placeholder, ertelenmiş içerik yüklenmeden önce gösterilecek içeriği bildiren isteğe bağlı bir bloktur. Angular, yükleme tamamlandıktan sonra yer tutucuyu ertelenmiş içerikle değiştirir. Bu blok isteğe bağlı olsa da, Angular ekibi her zaman bir yer tutucu eklemenizi önerir. Tam ertelenebilir görünümler belgelerinde daha fazla bilgi edinin
@loading Bu isteğe bağlı blok, ertelenmiş bağımlılıkların yüklenmesi sırasında gösterilecek içeriği bildirmenize olanak tanır.
@error Bu blok, ertelenmiş yükleme başarısız olduğunda gösterilecek içeriği bildirmenize olanak tanır.

Yukarıdaki tüm alt blokların içerikleri hevesli (eagerly) olarak yüklenir. Ek olarak, bazı özellikler bir @placeholder bloğu gerektirir.

Bu aktivitede, ertelenebilir görünümlerin durumlarını yönetmek için @loading, @error ve @placeholder bloklarını nasıl kullanacağınızı öğreneceksiniz.

  1. Add @placeholder block

    app.ts dosyanızda, @defer bloğuna bir @placeholder bloğu ekleyin.

    @defer {
  <article-comments />
} @placeholder {
  <p>Placeholder for comments</p>
}

  2. Configure the @placeholder block

    @placeholder bloğu, bu yer tutucunun gösterilmesi gereken minimum süreyi belirten isteğe bağlı bir parametre kabul eder. Bu minimum parametresi milisaniye (ms) veya saniye (s) cinsinden zaman artışlarıyla belirtilir. Bu parametre, ertelenmiş bağımlılıkların hızlıca getirilmesi durumunda yer tutucu içeriğin hızla yanıp sönmesini önlemek için mevcuttur.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
}

  3. Add @loading block

    Ardından bileşen şablonuna bir @loading bloğu ekleyin.

    @loading bloğu iki isteğe bağlı parametre kabul eder:

    • minimum: bu bloğun gösterilmesi gereken süre
    • after: yükleme şablonunu göstermeden önce yükleme başladıktan sonra beklenecek süre

    Her iki parametre de milisaniye (ms) veya saniye (s) cinsinden zaman artışlarıyla belirtilir.

    app.ts dosyasını, 1s minimum parametresine ve 500ms değerinde bir after parametresine sahip bir @loading bloğu içerecek şekilde güncelleyin.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
}

    NOT: bu örnek, ; karakteri ile ayrılmış iki parametre kullanmaktadır.

  4. Add @error block

    Son olarak, @defer bloğuna bir @error bloğu ekleyin.

    @defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
} @error {
  <p>Failed to load comments</p>
}

Tebrikler! Bu noktada, ertelenebilir görünümler hakkında iyi bir anlayışa sahipsiniz. Harika çalışmaya devam edin ve şimdi tetikleyicileri (triggers) öğrenelim.