Angular'da dinamik olarak oluşturulmuş bileşenler kullanıyorsanız, gerektiğinde ana ve alt bileşenler arasında bilgi aktarmanın muhtemelen zor olduğunu fark etmişsinizdir. Bilgiyi ebeveynde sağlamanız ve ardından onu alt bileşene enjekte etmeniz gerekir. Bunu yapmak mutlaka zor olmasa da, çok sayıda ekstra standart kodla sonuçlanır.  Alıştığımız gibi   dekoratörünü kullanabilseydik çok daha iyi olurdu. Öyleyse tahmin et? Angular, on altıncı versiyondan itibaren tam olarak bu şeyi yapmayı destekliyor. Bu yazıda size nasıl yapılacağını göstereceğim. Tamam, hadi konuya geçelim. @Input   https://youtu.be/MT2JP8pn1qU?embedable=true  Açısal Enjektörü Kullanarak Verileri Eski Şekilde Aktarma  İlk olarak, verileri üst öğeden dinamik olarak oluşturulan bileşenlere nasıl aktardığımıza bakalım. Burada, bu örnekte, bileşen şablonunun içinde   var ve onu oynatıcı bileşenimize aktarıyoruz. *ngComponentOutlet  Bu durumda, aynı zamanda özel bir çocuk enjektörü de geçiyoruz ve daha önce çocuk bileşenin verilerini bu şekilde enjekte ediyorduk.  ana.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container> ` }) export class App { protected playerComponent = PlayerComponent; }  Ve bu çocuk enjektörü oluşturmak için, şablon içinde ayarlanıp sonra kullanılabilecek bir özellik yaratmamız gerekiyordu.   export class App { protected childInjector?: Injector; ... }  Daha sonra yapıcının içindeki açısal çekirdekten Enjektöre enjeksiyon yapmamız gerekiyordu.   export class App { ... constructor(private injector: Injector) { } }  Bundan sonra, oyuncu jetonumuzu çocuğa sağlamak için create yöntemini ve sağlayıcıların dizisini kullanarak çocuk enjektörünü ayarlamamız gerekiyordu.   export class App { ... constructor(private injector: Injector) { this.childInjector = Injector.create({ providers: [ { provide: PlayerToken, useValue: this.player } ], parent: this.injector }); } }  Ve son olarak player bileşenimiz olan child bileşende, angular core'dan inject metodu ile player özelliğimizi ayarlamamız gerekiyordu.  player.component.ts   export class PlayerComponent { protected player?: Player = inject(PlayerToken); }  Yani bunların hepsi basit bir oynatıcı nesnesini dinamik bir bileşene geçirmek içindir. Demek istediğim, eğer bu dinamik bir bileşen olmasaydı, bunu basitçe bir   yapardık ve oynatıcı veri nesnesini ebeveyndeki   Input'a bağlardık. Ancak bu dinamik olarak oluşturulmuş bir bileşen olduğundan bunu yapamayız, değil mi? @Input @Input  Angular onaltıdan itibaren aslında bunun yerine   Input'ları kullanabiliriz ve bu, şu ana kadar gördüklerimizden çok daha basittir. @Input    Giriş Nesnesini Kullanarak Verileri Yeni Bir Şekilde Aktarma *ngComponentOutlet  Bunun yerine bu oynatıcı özelliğini   olarak değiştirerek başlıyoruz. Ve oynatıcı arayüzümüze basitçe yazılması yeterlidir. @Input  player.component.ts   export class PlayerComponent { @Input() player?: Player; }  Artık ihtiyaç duyulmadığı için enjeksiyon yöntemini ve oyuncu jetonlarını içe aktarmayı kaldırabiliriz. Daha sonra ebeveynimizde şablonda enjektörü kaldırabilir ve onun yerine bir input nesnesi koyabiliriz. Bu nesneyi istediğimiz sayıda girdiye aktarabiliriz. Yani, eğer beş girdimiz olsaydı, sadece isimlerini eklerdik ve sonra her birine ihtiyacımız olan veriyi iletirdik.  Ancak bu durumda, alt bileşenimiz olan oynatıcıda yalnızca bir girdimiz var, dolayısıyla onu geçmek için ihtiyacımız olan tek şey bu.  ana.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container> ` })  Artık çocuk enjektörü kaldırabiliriz. Bu aynı zamanda yapıcıyı da tamamen kaldırabileceğimiz anlamına gelir. Ve son olarak, artık kullanmadığımız için Enjektörü açısal çekirdekten ve oyuncu jetonunu içe aktarmadan kaldırabiliriz.   export class App { protected player: Player = { name: 'LeBron James', games: 1421, points: 38652, fieldGoalPercentage: 0.505, threePointPercentage: 0.345, imageName: 'lebron-james' }; protected playerComponent = PlayerComponent; }  Ve bu kadar. Her şeyin eskisi gibi çalıştığını görüyoruz. Yani, yapılması biraz daha kolay ve daha az kod da var ki bu her zaman harikadır.  Ancak bir sıkıntı,   Input'ların desteklenmesine rağmen   Output'ların desteklenmemesidir. Bir çeşit serseri, ama olan bu. Umarım gelecekte destek ekleyeceklerdir çünkü bu da çok kullanışlı olacaktır, ancak bekleyip görmemiz gerekecek. @Input @Output  Bunu Çalışırken Görmek İster misiniz?  Aşağıdaki Stackblitz örneğinde bu tekniklerin demo koduna ve örneklerine göz atın. Herhangi bir sorunuz veya düşünceniz varsa yorum bırakmaktan çekinmeyin.   https://stackblitz.com/edit/stackblitz-starters-9xzkkf?ctl=1&embed=1&file=src%2Fmain.ts&embedable=true

Buy Me a Coffee

Bu ses hikayenin orijinal dilinde üretilmiştir!

Dinamik Olarak Oluşturulan Bileşenlere Veri Aktarmak için Angular @Input Nasıl Kullanılır

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps