angular - Ebeveynden çocuğa bir değişken almak, onu ebeveyn bileşenden tetiklemek

Bunu anlamakta zorlanıyorum.

Bir değişkeni şu şekilde aktardığım bir bileşenim var:

 <app-selectcomp [plid]="plid" [codeId]="selectedCode" (notify)="getCompFromChild($event)"></app-selectcomp>

İki değişken geçiriyorum: plid ve codeId.

Bu iki değişkenle, response.data adında bir dizi oluşturan bazı kullanıcı eylemleri vardır

response.data'yı üst bileşene şu şekilde gönderebildim:

@Output() notify: EventEmitter<string> = new EventEmitter<string>(); 
this.notify.emit(this.response.data)

Ve sonra, üst bileşende

getCompFromChild(values): void {}

Tüm bunlar iyi çalışıyor, ancak veriyi üst bileşende almak için, örneğin bir butona tıklamak gibi, bunu alt bileşenden tetiklemem gerekiyor.

Çocuk bileşende var olan response.data değerini, doğrudan ebeveyn bileşenden, örneğin EBEVEYN bileşende bir butona tıklayarak, almanın bir yolunu bulamıyorum.

<button type="submit" (click)="getDatainChild()">Get Child Data</button>

Teşekkürler.

Cevap #1

İstediğiniz davranışı elde etmek için ebeveyn bileşenden çocuk bileşene bir referans sağlayarak @ViewChild() kullanabilirsiniz. Bu yaklaşımı takip ederek, ebeveyn çocuk bileşenin genel (public) metodlarını çağırabilir. Şöyle bir şey:

Üst bileşeninizde (.ts):

@ViewChild('selectComp') selectComp: SelectComponent; <= specify the type of your child component

Üst bileşeninizde (.html)

<app-selectcomp #selectComp [plid]="plid" [codeId]="selectedCode" 
       (notify)="getCompFromChild($event)">
</app-selectcomp>

Çocuk bileşeninizde (.ts) Ana bileşen tarafından çağrılacak bir yöntem oluşturun

public getData() { }

Artık, üst bileşen içinde alt bileşenin getData() metodunu çağırabilirsiniz.

selectComp.getData();

İlgili makaleler