Bileşen sınıfını güncelleme

Angular'da, bileşenin mantığı ve davranışı bileşenin TypeScript sınıfında tanımlanır.

NOTE: Temel bilgiler rehberinde dinamik metin gösterme hakkında daha fazla bilgi edinin.

Bu aktivitede, bileşen sınıfını nasıl güncelleyeceğinizi ve interpolasyon kullanmayı öğreneceksiniz.


  1. city adlı bir özellik ekleyin

    city adında bir özellik ekleyerek bileşen sınıfını güncelleyin.

    export class App {
      city = 'San Francisco';
    }

    city özelliği string türündedir ancak TypeScript'te tür çıkarımı sayesinde türü belirtmeyebilirsiniz. city özelliği App sınıfında kullanılabilir ve bileşen şablonunda referans alınabilir.


    Bir sınıf özelliğini şablonda kullanmak için {{ }} söz dizimini kullanmanız gerekir.

  2. Bileşen şablonunu güncelleyin

    template özelliğini aşağıdaki HTML ile eşleşecek şekilde güncelleyin:

    template: `Hello {{ city }}`,

    Bu, interpolasyonun bir örneğidir ve Angular şablon söz diziminin bir parçasıdır. Bir şablona dinamik metin koymaktan çok daha fazlasını yapmanızı sağlar. Bu söz dizimini fonksiyon çağırmak, ifade yazmak ve daha fazlası için de kullanabilirsiniz.

  3. İnterpolasyon ile daha fazla pratik

    Şunu deneyin - içeriği 1 + 1 olan başka bir {{ }} seti ekleyin:

    template: `Hello {{ city }}, {{ 1 + 1 }}`,

    Angular, {{ }} içindeki ifadeleri değerlendirir ve çıktıyı şablonda gösterir.

Bu, Angular şablonlarıyla mümkün olanın sadece başlangıcıdır, daha fazlasını öğrenmek için devam edin.