Wie kann ein Ereignis von einem Elternteil an ein Kind gesendet werden?

Ich verwende derzeit Angular 2. Normalerweise verwenden wir @Output() addTab = new EventEmitter<any>();und addTab.emit()senden dann ein Ereignis an die übergeordnete Komponente.

Gibt es eine Möglichkeit, dies von Eltern zu Kind zu tun?

Mit RxJs können Sie a Subjectin Ihrer übergeordneten Komponente deklarieren und als untergeordnete Komponente übergeben. Die untergeordneteObservable Komponente muss diese nur abonnieren Observable.

Übergeordnete Komponente

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

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

Eltern-HTML

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

Untergeordnete Komponente

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

Soweit ich weiß, gibt es zwei Standardmethoden, wie Sie dies tun können.

1. @Input

Immer wenn sich die Daten im übergeordneten Element ändern, wird das untergeordnete Element in der ngOnChanges-Methode darüber benachrichtigt. Das Kind kann darauf einwirken. Dies ist die Standardmethode für die Interaktion mit einem Kind.

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. Shared-Service-Konzept

Erstellen eines Dienstes und Verwenden eines Observable im gemeinsam genutzten Dienst. Das Kind abonniert es und bei jeder Änderung wird das Kind benachrichtigt. Dies ist auch eine beliebte Methode. Wenn Sie etwas anderes als die Daten senden möchten, die Sie als Eingabe übergeben, kann dies verwendet werden.

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

In einer übergeordneten Komponente können Sie mit @ViewChild () auf die Methode / Variable der untergeordneten Komponente zugreifen.

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

Aktualisieren:

Winkel 8 ab -

@ViewChild(NumberComponent, { static: false })

Verwenden Sie den Dekorator @Input () in Ihrer untergeordneten Komponente, damit das übergeordnete Element an diese Eingabe binden kann.

In der untergeordneten Komponente deklarieren Sie sie wie folgt:

@Input() myInputName: myType

Um eine Eigenschaft vom übergeordneten Element an ein untergeordnetes Element zu binden, müssen Sie in Ihrer Vorlage die Bindungsklammern und den Namen Ihrer Eingabe zwischen ihnen hinzufügen.

Beispiel:

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

Beachten Sie jedoch, dass Objekte als Referenz übergeben werden. Wenn das Objekt im untergeordneten Objekt aktualisiert wird, wird die Variable des Elternteils zu aktualisiert. Dies kann irgendwann zu unerwünschtem Verhalten führen. Bei Primärtypen wird der Wert kopiert.

Um weiter zu gehen, lesen Sie Folgendes:

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

Innerhalb des übergeordneten Elements können Sie mit @ViewChild auf das untergeordnete Element verweisen. Bei Bedarf (dh wenn das Ereignis ausgelöst wird) können Sie einfach eine Methode im untergeordneten Element vom übergeordneten Element mithilfe der @ ViewChild-Referenz ausführen.