Wie genau funktioniert dieses Angular 2-Tutorial zur benutzerdefinierten Ereignisbindung?

Question

Ich bin ein absoluter Anfänger mit Angular 2 und ich habe einige Zweifel über ein Tutorial Beispiel, das ich über die "Bindung an benutzerdefinierte Ereignisse" studieren.

So habe ich die Hauptkomponente, die diese Ansicht app.component.html genannt hat:

<div class="container"> 
    <app-cockpit 
    (serverCreated)="onServerAdded($event)" 
    (blueprintCreated)="onBlueprintAdded($event)"> 
    </app-cockpit> 
    <hr> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <app-server-element 
     *ngFor="let serverElement of serverElements" 
     [srvElement]="serverElement"></app-server-element> 
    </div> 
    </div> 
</div> 

In dieser Ansicht definiert wird, um die Einbeziehung der Unterkomponente, um diese Teilansicht in der vorherige Hauptansicht, die cockpit.component.html Dateiinhalt:

<div class="row"> 
    <div class="col-xs-12"> 
    <p>Add new Servers or blueprints!</p> 
    <label>Server Name</label> 
    <input type="text" class="form-control" [(ngModel)]="newServerName"> 
    <label>Server Content</label> 
    <input type="text" class="form-control" [(ngModel)]="newServerContent"> 
    <br> 
    <button 
     class="btn btn-primary" 
     (click)="onAddServer()">Add Server</button> 
    <button 
     class="btn btn-primary" 
     (click)="onAddBlueprint()">Add Server Blueprint</button> 
    </div> 
</div> 

das 2-Taste die unterbreiten enthält für m.

Hier die ersten Zweifel, von dem, was ich verstanden habe, etwas zu tun wie:

(click)="onAddServer() 

bedeutet soviel wie: „, wenn das Click-Ereignis geschehen, führen Sie die onAddServer() -Methode in die Steuerung dieser Ansicht definiert ".

Also, in die coockpit.component.ts Klasse I haben:

import {Component, EventEmitter, OnInit, Output} from '@angular/core'; 

@Component({ 
    selector: 'app-cockpit', 
    templateUrl: './cockpit.component.html', 
    styleUrls: ['./cockpit.component.css'] 
}) 
export class CockpitComponent implements OnInit { 

    /* 
    EvebtEmitter è un oggetto del framework Angular che permette di emettere i nostri custom events 
    @Output() decorator usato per passare qualcosa fuori dal component 
    */ 
    @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>(); 
    @Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>(); 

    newServerName = ''; 
    newServerContent = ''; 


    constructor() { } 

    ngOnInit() { 
    } 

    onAddServer() { 
    this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent}); 
    } 

    onAddBlueprint() { 
    console.log('INTO onAddBluePrint()'); 
    this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent}); 
    } 

} 

Das sollte funktioniert auf diese Weise:

The newServerName und newServerContent Variable, die die Daten enthält, eingefügt durch den Benutzer in der Form, weil diese Variable durch [(ngModel)] Richtlinie:

gebunden sind

<input type="text" class="form-control" [(ngModel)]="newServerName"> 
<input type="text" class="form-control" [(ngModel)]="newServerContent"> 

Wenn der Benutzer klicken Sie auf den Server Taste, um die onAddServer Add() Methode perfromed wird und ein Ereignis mit -serverName und serverContent Inhalt an der extern emittiert wird:

this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent}); 

Ein Zweifel ist also: Was ist ein Ereignis? Es scheint mir ein einfaches Json-Objekt zu sein, das einige Informationen enthält.

Dann wird der zweite Zweifel: die serverCreated Ereignis von dieser Steuerung an die extern emittiert wird, weil es unter Verwendung deorate @Output() Dekorateur.

Was ist der Standardempfänger? Es scheint mir, dass die Steuerung des Mutter componet ist, weil in meiner app.component.ts Klasse ich diese Methode haben, die dieses Ereignis behandeln:

onServerAdded (Serverdaten: {Servername: string, serverContent: string}) { this.serverElements.push ({ typ: 'server', name: serverData.serverName, inhalt: serverData.Server-Inhalt }); }

Was bedeutet exatly das:

Es ist wie ich sage, dass ich in der Ansicht der Hauptkomponente sage, dass die app-Cockpit Komponente diese Veranstaltung die werfen Elternkomponente.

Ist meine Argumentation richtig oder fehlt mir etwas? Es bedeutet also, dass ich diese Strategie nur verwenden kann, um ein Ereignis von einer Kindkomponente an eine Elternkomponente zu übergeben. Oder kann ich das Gegenteil tun (von Eltern zu Kind, ich weiß nicht, ob es ein echtes Anwendungsszenario ist).

Answer 1

Sie haben grundsätzlich Recht in Ihrer Argumentation.

speziell auf Ihre Zweifel kommen:

1) Wenn Sie ein Ereignis emittieren, zum Beispiel in Ihrem Fall über this.serverCreated.emit() Methodenaufruf können Sie als Parameter der die emit() Methode übergeben jedes Objekt, und damit auch eine reine Javascript Json-Objekt. Sie könnten ein beliebiges anderes Objekt übergeben, das Sie als Instanz einer Typescript-Klasse definieren können, sowie jeden primitiven Typ wie String oder Zahl.

2) Ereignisse, die mit dem @Output() - Dekorator definiert wurden, können von der übergeordneten Komponente abgehört werden und werden daher als ein Mechanismus verwendet, um Kinderkomponenten zu ermöglichen, mit ihrer Elternkomponente zu sprechen. Die übergeordnete Komponente kann Parameter an ihre untergeordneten Komponenten über den symmetrischen @ Input() - Mechanismus übergeben.

Sie können eine vollständige Liste der Methoden für die Kommunikation zwischen den Komponenten unter https://angular.io/guide/component-interaction

erhalten