Girdileri ve Çıktıları Dışa Açma
Konak yönergesinin girdilerini ve çıktılarını kullanılabilir hâle getirin
Girdileri ve Çıktıları Dışa Açma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Birleştirilmiş API'leri Dışa Açma
Bir yönergeyi hostDirectives aracılığıyla birleştirdiğinizde, yönergenin girişleri ve çıkışları varsayılan olarak gizlenir. Birleştirme API'si, seçtiğiniz girişleri ve çıkışları ana öğenin herkese açık API'sine açmanıza olanak tanır.
Nesne Biçimi
Yalnızca sınıfı listelemek yerine directive, inputs ve outputs dizilerini içeren bir nesne kullanın.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Bir Girdiyi Dışa Açma
Bir girdi adını inputs içinde listelemek, tüketicilerin bu girdiyi ana öğeye bağlayabilmesini sağlar.
<app-button tooltipText="Save changes"></app-button>Bir Çıktıyı Dışa Açma
Bir çıktıyı listelemek, ana öğenin bu yönergenin olaylarını yeniden yayınlamasını sağlar.
<app-button (tooltipShown)="onShown()"></app-button>Dışa Açarken Yeniden Adlandırma
Bir girdiyi veya çıktıyı dışa açarken yeniden adlandırmak için publicName: internalName biçimini kullanın.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Çıktıları Yeniden Adlandırma
Çıktılar da aynı şekilde yeniden adlandırılır.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Varsayılan Olarak Neden Gizlenir?
Birleştirilen girdileri ve çıktıları gizlemek, ana öğenin API'sini bilinçli ve amaca yönelik tutar. Tüketiciler için anlamlı olanları dışa açarak iç yönerge ayrıntılarının sızmasını önlersiniz.
Kendi Girdileriyle Birleştirme
Ana öğe, dışa açılan girdilerin yanı sıra kendi girdilerine de sahip olabilir; Angular bunları öğe üzerinde tek bir herkese açık API'de birleştirir.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Ad Çakışmaları
Dışa açılan bir girdinin adı, ana öğenin kendi girdisiyle çakışırsa yeniden adlandırma çakışmayı önler ve amacı netleştirir.
İki Yönlü Bağlamalar
Birleştirme yoluyla iki yönlü bağlamayı desteklemek için girdiyi ve ona karşılık gelen Change çıktısını tutarlı adlarla birlikte dışa açın.
En İyi Uygulama
Tüketicilerin ihtiyaç duyduğu, en az sayıdaki ve iyi adlandırılmış yüzeyi dışa açın. İç adları, temel yönergenin söz dağarcığına göre değil, bileşeninizin söz dağarcığına uyacak şekilde yeniden adlandırın.
Kısa Kontrol
Girdileri ve çıktıları dışa açma konusundaki anlayışınızı test edin.
Özet
hostDirectives nesne biçiminin seçilen inputs ve outputs öğelerini isteğe bağlı publicName: internalName yeniden adlandırmasıyla ana öğenin API'sine açtığını ve herkese açık yüzeyi amaca yönelik tuttuğunu öğrendiniz.
Sıkça Sorulan Sorular
“Girdileri ve Çıktıları Dışa Açma” dersi ücretsiz mi?
Evet — “Girdileri ve Çıktıları Dışa Açma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Girdileri ve Çıktıları Dışa Açma” dersinde ne öğreneceğim?
Konak yönergesinin girdilerini ve çıktılarını kullanılabilir hâle getirin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Girdileri ve Çıktıları Dışa Açma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- hostDirectives Özelliği
- Girdileri ve Çıktıları Dışa Açma
- Yeniden Kullanılabilir Davranışlar Oluşturma
- Birleştirme ve Kalıtım Karşılaştırması