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

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 @Input 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.

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 *ngComponentOutlet var ve onu oynatıcı bileşenimize aktarıyoruz.

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 @Input yapardık ve oynatıcı veri nesnesini ebeveyndeki @Input Input'a bağlardık. Ancak bu dinamik olarak oluşturulmuş bir bileşen olduğundan bunu yapamayız, değil mi?

Angular onaltıdan itibaren aslında bunun yerine @Input Input'ları kullanabiliriz ve bu, şu ana kadar gördüklerimizden çok daha basittir.

*ngComponentOutlet Giriş Nesnesini Kullanarak Verileri Yeni Bir Şekilde Aktarma

Bunun yerine bu oynatıcı özelliğini @Input olarak değiştirerek başlıyoruz. Ve oynatıcı arayüzümüze basitçe yazılması yeterlidir.

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 Input'ların desteklenmesine rağmen @Output 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.

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.