Bagaimana cara memancarkan acara dari orang tua ke anak?

Saat ini saya menggunakan Angular 2. Biasanya kami menggunakan @Output() addTab = new EventEmitter<any>();dan kemudian addTab.emit()memancarkan acara ke komponen induk.

Adakah cara yang bisa kita lakukan wakil cersa, dari orang tua ke anak?

Dengan menggunakan RxJs , Anda dapat mendeklarasikan a Subjectdalam komponen induk Anda dan meneruskannya Observableke komponen anak, komponen anak hanya perlu berlangganan ini Observable.

Komponen Induk

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

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

Parent-HTML

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

Komponen Anak

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

Sejauh yang saya tahu, ada 2 cara standar untuk melakukannya.

1. @Input

Setiap kali data dalam induk berubah, anak akan diberi tahu tentang hal ini dalam metode ngOnChanges. Anak itu bisa bertindak berdasarkan itu. Ini adalah cara standar berinteraksi dengan seorang anak.

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. Konsep layanan bersama

Membuat layanan dan menggunakan yang dapat diamati di layanan bersama. Anak itu berlangganan dan setiap kali ada perubahan, anak itu akan diberi tahu. Ini juga merupakan metode yang populer. Ketika Anda ingin mengirim sesuatu selain data yang Anda berikan sebagai input, ini dapat digunakan.

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.})

Dalam komponen induk, Anda bisa menggunakan @ViewChild () untuk mengakses metode / variabel komponen anak.

@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();
    }
} 

Memperbarui:

Angular 8 dan seterusnya -

@ViewChild(NumberComponent, { static: false })

Gunakan dekorator @Input () dalam komponen anak Anda untuk memungkinkan induk mengikat masukan ini.

Dalam komponen anak Anda mendeklarasikannya apa adanya:

@Input() myInputName: myType

Untuk mengikat properti dari induk ke anak, Anda harus menambahkan dalam templat Anda tanda kurung pengikat dan nama input Anda di antara keduanya.

Contoh:

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

Namun berhati-hatilah, objek diteruskan sebagai referensi, jadi jika objek diperbarui pada anak, var induknya akan terlalu diperbarui. Hal ini terkadang dapat menyebabkan beberapa perilaku yang tidak diinginkan. Dengan tipe primer nilainya disalin.

Untuk membaca lebih lanjut ini:

Docs: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Di dalam induk, Anda bisa mereferensikan anak menggunakan @ViewChild. Jika diperlukan (misalnya, saat acara akan diaktifkan), Anda cukup menjalankan metode pada anak dari induk menggunakan referensi @ViewChild.