Ebeveynden çocuğa bir olay nasıl yayılır?

Şu anda Angular 2 kullanıyorum. Genellikle @Output() addTab = new EventEmitter<any>();ve daha sonra addTab.emit()ana bileşene bir olay yaymak için kullanırız.

Ebeveynden çocuğa cersa yardımcısı yapmanın bir yolu var mı?

RxJ'leri kullanarak , Subjectüst bileşeninizde bir tanımlayabilir ve onu Observablealt bileşen olarak iletebilirsiniz , alt bileşenin sadece buna abone olması gerekir Observable.

Ana Bileşen

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

Ebeveyn-HTML

<child [events]="eventsSubject.asObservable()"> </child>    

Alt Bileşen

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Bildiğim kadarıyla bunu yapmanın 2 standart yolu var.

1. @ Giriş

Ebeveyndeki veriler her değiştiğinde, çocuk ngOnChanges yönteminde bu konuda bilgilendirilir. Çocuk buna göre hareket edebilir. Bu, bir çocukla etkileşim kurmanın standart yoludur.

Parent-Component
public inputToChild: Object;

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

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// 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 anlayışı

Bir hizmet oluşturmak ve paylaşılan hizmette bir gözlemlenebiliri kullanmak. Çocuk buna abone olur ve her değişiklik olduğunda çocuk bilgilendirilir. Bu aynı zamanda popüler bir yöntemdir. Giriş olarak ilettiğ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.})

Bir üst bileşende, alt bileşenin yöntemine / değişkenine erişmek için @ViewChild () öğesini kullanabilirsiniz.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

Güncelleme:

Açısal 8'den itibaren -

@ViewChild(NumberComponent, { static: false })

Ebeveynin bu girdiye bağlanmasına izin vermek için alt bileşeninizde @Input () dekoratörünü kullanın.

Alt bileşende olduğu gibi beyan edersiniz:

@Input() myInputName: myType

Bir özelliği ebeveynden bir çocuğa bağlamak için, bağlama parantezlerini ve aralarındaki girişinizin adını şablonunuza eklemeniz gerekir.

Misal :

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

Ancak dikkat edin, nesneler bir referans olarak aktarılır, bu nedenle nesne çocukta güncellenirse, ebeveynin değişkeni fazla güncellenir. Bu bazen bazı istenmeyen davranışlara yol açabilir. Birincil türlerde değer kopyalanır.

Daha ileri gitmek için şunu okuyun:

Dokümanlar: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Üst öğe içinde, @ViewChild kullanarak çocuğa başvurabilirsiniz. Gerektiğinde (yani olay tetiklendiğinde), @ViewChild referansını kullanarak üst öğedeki alt öğede bir yöntemi çalıştırabilirsiniz.