Bileşen şablonuna interpolation ekleyin

Bu eğitim dersi, bir şablonda dinamik verileri görüntülemek için Angular şablonlarına interpolasyon eklemeyi gösterir.

Neler öğreneceksiniz

• Uygulamanız HousingLocation şablonunda interpolasyon değerlerini görüntüleyecektir.
• Uygulamanız bir konut konumu verisini tarayıcıya işleyecektir.

İnterpolasyonun kavramsal önizlemesi

Bu adımda, interpolasyon kullanarak input özelliklerinden okunan değerleri bir şablonda görüntüleyeceksiniz.

Angular şablonlarında {{ expression }} kullanarak, özelliklerden, input'lardan ve geçerli JavaScript ifadelerinden değerleri işleyebilirsiniz.

Daha ayrıntılı bir açıklama için lütfen İnterpolasyon ile değerleri görüntüleme kılavuzuna bakın.

1. İnterpolasyon değerlerini içerecek şekilde HousingLocation şablonunu güncelleyin

   Bu adım, HousingLocation şablonuna yeni HTML yapısı ve interpolasyon değerleri ekler.

   Kod editöründe:

   1. src/app/housing-location/housing-location.ts dosyasına gidin
   2. @Component dekoratörünün template özelliğinde, mevcut HTML işaretlemesini aşağıdaki kodla değiştirin:

      Update HousingLocation template in housing-location.ts

      import {Component, input} from '@angular/core';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-housing-location',
        template: `
          <section class="listing">
            <img
              class="listing-photo"
              [src]="housingLocation().photo"
              alt="Exterior photo of {{ housingLocation().name }}"
              crossorigin
            />
            <h2 class="listing-heading">{{ housingLocation().name }}</h2>
            <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
          </section>
        `,
        styleUrls: ['./housing-location.css'],
      })
      export class HousingLocation {
        housingLocation = input.required<HousingLocationInfo>();
      }
      

   Bu güncellenmiş şablon kodunda, housingLocation.photo değerini src niteliğine bağlamak için özellik bağlama kullandınız. alt niteliği, görselin alt metnine daha fazla bağlam vermek için interpolasyon kullanır.

   housingLocation özelliğinin name, city ve state değerlerini dahil etmek için interpolasyon kullanırsınız.

2. Değişikliklerin tarayıcıda görüntülendiğini doğrulayın

   1. Tüm değişiklikleri kaydedin.
   2. Tarayıcıyı açın ve uygulamanın fotoğrafı, şehri ve eyalet örnek verisini işlediğini doğrulayın.

Artık iki önemli beceriye sahipsiniz:

• bileşenlere veri aktarma
• bir şablonda değerleri interpolasyon ile görüntüleme

Bu becerilerle, uygulamanız artık veri paylaşabilir ve tarayıcıda dinamik değerler görüntüleyebilir. Şimdiye kadar harika iş çıkardınız.

Bu derste ele alınan konular hakkında daha fazla bilgi için: