Çıktı Dekoratörünü Açısal Olarak Kullanma

Angular'da, bir web sayfası birçok farklı yeniden kullanılabilir bileşen içerebilir. Her bileşen genellikle kendi TypeScript mantığını, HTML şablonunu ve CSS stilini içerir.

Bileşenleri diğer bileşenlerin içinde de yeniden kullanabilirsiniz. Bu durumda, bir alt bileşenden üst bileşene bilgi göndermek için Çıktı dekoratörünü kullanabilirsiniz.

Alt bileşende meydana gelen olayları dinlemek için Çıktı dekoratörünü de kullanabilirsiniz.

Bir Alt Bileşene Çıktı Dekoratörü Nasıl Eklenir?

Öncelikle, bir ana bileşen ve bir alt bileşen içeren yeni bir Angular uygulaması oluşturmanız gerekecek.

Bir üst ve alt bileşene sahip olduğunuzda, verileri aktarmak ve iki bileşen arasındaki olayları dinlemek için Çıktı dekoratörünü kullanabilirsiniz.

1. Yeni bir tane oluştur açısal uygulama. Varsayılan olarak "uygulama", kök bileşenin adıdır. Bu bileşen üç ana dosya içerir: "app.component.html", "app.component.css" ve "app.component.ts".
2. Bu örnek için, "uygulama" bileşeni üst bileşen olarak işlev görecektir. "app.component.html" içindeki tüm içeriği aşağıdakiyle değiştirin:

   <divsınıf="ana bileşen">
   <h1> Bu ana bileşendir h1>
   div>

3. "app.component.css" içindeki ana uygulama bileşenine biraz stil ekleyin:

   .ana bileşen {
   font ailesi: Arial, Helvetica, sans Serif;
   arka plan rengi: açık mercan;
   dolgu malzemesi: 20piksel
   }

4. için "ng oluştur bileşeni" komutunu kullanın. yeni bir Açısal bileşen oluştur "veri bileşeni" olarak adlandırılır. Bu örnekte, "veri bileşeni", alt bileşeni temsil edecektir.

   ng g c veri bileşeni

5. "data-component.component.html" içindeki alt bileşene içerik ekleyin. Yeni bir düğme eklemek için mevcut içeriği değiştirin. Düğmeyi, kullanıcı tıkladığında çalışacak bir işleve bağlayın:

   <divsınıf="alt bileşen">
   <P> Bu alt bileşendir P>
   <düğme (tıklamak)="onButtonClick()">Beni tıkladüğme>
   div>

6. "data-component.component.css" içindeki alt bileşene biraz stil ekleyin:

   .child-bileşeni {
   font ailesi: Arial, Helvetica, sans Serif;
   arka plan rengi: açık mavi;
   marj: 20piksel;
   dolgu malzemesi: 20piksel
   }

7. "data-component.component.ts" içindeki bileşen için TypeScript dosyasına onButtonClick() işlevini ekleyin:

   onButtonClick() {
   }

8. Hala TypeScript dosyasının içinde, içe aktarma listesine "Çıktı" ve "EventEmitter" ekleyin:

   içe aktarmak { Bileşen, Çıktı, EventEmitter, OnInit } itibaren"@açısal/çekirdek";

9. DataComponentComponent sınıfının içinde, "buttonWasClicked" adlı bileşen için bir Çıktı değişkeni bildirin. Bu bir EventEmitter olacaktır. EventEmitter, bir olay gerçekleştiğinde başka bir bileşeni bilgilendirmenizi sağlayan yerleşik bir sınıftır.

   ihracatsınıf Veri Bileşeni Bileşeni uygular Başlatmada {
   @Çıktı() buttonWasClicked = yeni EventEmitter<geçersiz>();
   // ...
   }

10. onButtonClick() işlevi içindeki "buttonWasClicked" olay yayıcısını kullanın. Kullanıcı düğmeyi tıkladığında, veri bileşeni bu olayı ana uygulama bileşenine gönderecektir.

    onButtonClick() {
    Bu.buttonWasClicked.emit();
    }

Alt Bileşendeki Olayları Üst Bileşenden Dinleme

Alt bileşenin Output özelliğini kullanmak için, ana bileşenden yayılan olayı dinlemeniz gerekir.

1. "app.component.html" içindeki alt bileşeni kullanın. HTML etiketi oluştururken "buttonWasClicked" çıktısını bir özellik olarak ekleyebilirsiniz. Olayı yeni bir işleve bağlayın.

   <uygulama verisi bileşeni (düğmeTıklandı)="buttonInChildComponentWasClicked()">uygulama verisi bileşeni>

2. "app.component.ts" içinde, alt bileşende gerçekleştiğinde düğme tıklama olayını işlemek için yeni işlevi ekleyin. Kullanıcı düğmeye tıkladığında bir mesaj oluşturun.

   İleti: sicim = ""
   buttonInChildComponentWasClicked() {
   Bu.mesaj = "Alt bileşendeki düğme tıklandı";
   }

3. "app.component.html" içindeki mesajı görüntüleyin:

   <P>{{İleti}}P>

4. Açısal uygulamanızı çalıştırmak için bir terminale "ng serve" komutunu yazın. Localhost: 4200 adresindeki bir web tarayıcısında açın. Ebeveyn ve çocuk bileşenleri, aralarında ayrım yapmayı kolaylaştırmak için farklı arka plan renkleri kullanır.
5. Tıkla Beni tıkla düğme. Alt bileşen, olayı, mesajı görüntüleyecek olan üst bileşene gönderecektir.

Alt Bileşenden Üst Bileşene Veri Gönderme

Alt bileşenden üst bileşene de veri gönderebilirsiniz.

1. "data-component.component.ts" içinde, bazı verileri içeren dizilerin listesini saklamak için bir değişken ekleyin.

   listOfPeople: sicim[] = ["Joey", 'John', "James"];

2. buttonWasClicked olay yayıcısının dönüş türünü değiştirin. Önceki adımda bildirdiğiniz dizelerin listesiyle eşleşmesi için onu geçersizden dize[]'ye değiştirin:

   @Çıktı() buttonWasClicked = yeni EventEmitter<sicim[]>();

3. onButtonClick() işlevini değiştirin. Olayı ana bileşene gönderirken, verileri emit() işlevine bir argüman olarak ekleyin:

   onButtonClick() {
   Bu.buttonWasClicked.emit(Bu.listOfPeople);
   }

4. "app.component.html"de "app-data-component" etiketini değiştirin. "$event" öğesini buttonInChildComponentWasClicked() işlevine ekleyin. Bu, alt bileşenden gönderilen verileri içerir.

   <uygulama verisi bileşeni (düğmeTıklandı)="buttonInChildComponentWasClicked($event)">uygulama verisi bileşeni>

5. Verilere parametre eklemek için "app.component.ts" içindeki işlevi güncelleyin:

   buttonInChildComponentWasClicked (dataFromChild: sicim[]) {
   Bu.mesaj = "Alt bileşendeki düğme tıklandı";
   }

6. Alt bileşenden gelen verileri depolamak için "data" adlı yeni bir değişken ekleyin:

   İleti: sicim = ""
   veri: sicim[] = []
   buttonInChildComponentWasClicked (dataFromChild: sicim[]) {
   Bu.mesaj = "Alt bileşendeki düğme tıklandı";
   Bu.data = dataFromChild;
   }

7. Verileri HTML sayfasında görüntüleyin:

   <P>{{data.join(', ')}}P>

8. Açısal uygulamanızı çalıştırmak için bir terminale "ng serve" komutunu yazın. Localhost: 4200 adresindeki bir web tarayıcısında açın.
9. Tıkla Beni tıkla düğme. Alt bileşen, verileri alt bileşenden üst bileşene gönderir.

Çıktı Dekoratörünü Kullanarak Diğer Bileşenlere Veri Gönderme

Girdi dekoratörü veya Bileşen dekoratörü gibi Angular'da kullanabileceğiniz başka dekoratörler vardır. Kodunuzu basitleştirmek için diğer dekoratörleri Angular'da nasıl kullanabileceğiniz hakkında daha fazla bilgi edinebilirsiniz.