Bir olayı ebeveynden çocuğa açısal olarak nasıl yayınlanır?

Question

Şu anda açısal2 kullanıyorum. Genellikle @Output() addTab = new EventEmitter() kullanırız; ve sonra ana bileşene bir olay göndermek için addTab.emit(). Ebeveynten çocuğa yardımcısı cersa yapmamızın bir yolu var mı?

Answer 1

Ebeveynin bu girişe bağlanmasına izin vermek için alt öğe bileşeninizdeki @Input() dekoratörünü kullanın. Eğer olarak ilan çocuk bileşeninde

geçerli:

@Input() myInputName: myType

Eğer bağlayıcı ayraçlar ve aralarında girişiniz adını şablon içinde eklemek gerekir ebeveynden çocuğa bir özellik bağlamak için.

Örnek: nesne çocuğun güncellenmesi durumunda ebeveynin var çok güncellenecektir yüzden

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

Ama dikkatli olun, nesneler, bir referans olarak geçirilir. Bu, bazen istenmeyen davranışlara yol açabilir. Birincil tiplerde, değer kopyalanır.

Dokümanlar:

Answer 2

https://angular.io/docs/ts/latest/cookbook/component-communication.html olarak bildiğim kadarıyla, bunu yapabilirsiniz 2 standart yolu vardır

okumak daha ileri gitmek için. ebeveyn değişiklikleri veri, çocuk ngOnChanges yöntemi bu konuda uyarılmalıdır alır zaman

@Input

1.. Çocuk üzerinde hareket edebilir. Bu, bir çocukla etkileşimde olan standart yoludur.

Parent-Component 
public inputToChild: Object; 

Parent-HTML 
<child [data]="inputToChild"> </child>  

Child-Component: @Input() data; 

ngOnChanges(changes: SimpleChanges){ 

// Whenever the data in the parent changes, this method gets triggered. You 
can act on the changes here. You will have both the previous value and the 
current value here. 
} 

2. Paylaşılan hizmet konsepti

bir hizmeti oluşturma ve paylaşılan hizmetinde bir gözlenebilir kullanarak. Çocuk ona abone olur ve bir değişiklik olduğunda, çocuk bilgilendirilir. Bu aynı zamanda popüler bir yöntemdir. Girdi olarak verdiğiniz verilerden başka bir şey göndermek istediğinizde bu kullanılabilir.

SharedService 
subject: Subject<Object>; 

Parent-Component 
constructor(sharedService: SharedService) 
this.sharedService.subject.next(data); 

Child-Component 
constructor(sharedService: SharedService) 
this.sharedService.subject.subscribe((data)=>{ 

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})