Jak wysłać wydarzenie z rodzica na dziecko?

Obecnie używam Angular 2. Zwykle używamy, @Output() addTab = new EventEmitter<any>();a następnie addTab.emit()emitujemy zdarzenie do komponentu nadrzędnego.

Czy jest jakiś sposób, żebyśmy mogli to zrobić vice cersa, od rodzica do dziecka?

Używając RxJs , możesz zadeklarować a Subjectw komponencie nadrzędnym i przekazać go jako Observablekomponent potomny, komponent potomny po prostu musi to zasubskrybować Observable.

Element nadrzędny

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

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

Nadrzędny HTML

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

Komponent potomny

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

O ile wiem, możesz to zrobić na 2 standardowe sposoby.

1. @Input

Za każdym razem, gdy zmieniają się dane w rodzicu, dziecko jest o tym powiadamiane w metodzie ngOnChanges. Dziecko może na to działać. To jest standardowy sposób interakcji z dzieckiem.

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. Koncepcja usług wspólnych

Tworzenie usługi i używanie obserwowalnego w usłudze wspólnej. Dziecko subskrybuje ją, a gdy zajdzie zmiana, zostanie o tym powiadomione. Jest to również popularna metoda. Jeśli chcesz wysłać coś innego niż dane, które przekazujesz jako dane wejściowe, możesz tego użyć.

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

W komponencie nadrzędnym możesz użyć @ViewChild (), aby uzyskać dostęp do metody / zmiennej komponentu potomnego.

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

Aktualizacja:

Kątowy od 8 wzwyż -

@ViewChild(NumberComponent, { static: false })

Użyj dekoratora @Input () w komponencie podrzędnym, aby umożliwić rodzicowi powiązanie z tym wejściem.

W komponencie potomnym deklarujesz, jak jest:

@Input() myInputName: myType

Aby powiązać właściwość między rodzicem a dzieckiem, musisz dodać w szablonie nawiasy wiążące i nazwę wejścia między nimi.

Przykład:

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

Ale uwaga, obiekty są przekazywane jako referencje, więc jeśli obiekt jest aktualizowany w dziecku, zmienna rodzica będzie zbyt zaktualizowana. Może to czasem prowadzić do niechcianego zachowania. W przypadku typów podstawowych wartość jest kopiowana.

Aby przejść dalej, przeczytaj to:

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

W ramach elementu nadrzędnego możesz odwoływać się do dziecka za pomocą @ViewChild. W razie potrzeby (tj. Gdy zdarzenie zostanie wyzwolone), możesz po prostu wykonać metodę w dziecku z rodzica, używając odwołania @ViewChild.