Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels
"Understanding @Input, @Output und EventEmitter in Angular" von
narrishneo .
Grüße an alle, die Informationen über die Feinheiten des Angular-Frameworks sammeln möchten.
Heute hielt ich es für notwendig, die Informationen über die Organisation der Interaktion zwischen Angular-Komponenten besser zu studieren und Übersetzungen von Artikeln, die für mich von Interesse sind, aus dem Englischen zu üben.
Ich hoffe, es gibt diejenigen, für die die Übersetzung des Artikels aus
Medium nützlich sein wird.
Nachdem ich lange den Wunsch hatte, nützliche Artikel aus dem Englischen zu übersetzen, beschloss ich, mit einem einfachen, nicht sehr umfangreichen, aber möglicherweise ergänzenden Wissen über den Artikel zu beginnen. Zu Ihrer Aufmerksamkeit, meine Herren ...
Für diejenigen, die Angular noch nicht kennen, können die
Eingabe- und
Ausgabedekoratoren peinlich sein, insbesondere wenn Sie versuchen, ihren Zweck anhand von Codebeispielen herauszufinden. In diesem Artikel werde ich versuchen, sie auf einfachste Weise zu erklären.
Datenaustausch-Tool
Zunächst besteht die Aufgabe der
Eingabe- und
Ausgabedekoratoren darin, Daten zwischen den Komponenten auszutauschen. Sie sind ein Mechanismus zum Empfangen / Senden von Daten von einer Komponente zu einer anderen.
Die Eingabe wird zum Empfangen von Daten verwendet, während die
Ausgabe zum Senden verwendet wird.
Die Ausgabe sendet Daten, indem sie als Ereignisproduzenten
verfügbar gemacht werden , normalerweise als Objekte der
EventEmitter- Klasse
.Wenn Sie also den Code sehen, sehen Sie wie folgt aus:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
er meint:
- Hey, ich erwarte die an mich gesendeten Daten. Ich werde sie erhalten und als Wert der Item- Eigenschaft speichern .
- Übrigens werde ich der Grund für das Senden von Daten mit der Eigenschaft onChange sein .
Angenommen , Sie haben eine
TodoList- Komponente, die eine
TodoItem- Komponente enthält.
In der
TodoLis t-Komponentenvorlage erwarten Sie
Folgendes :
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
was heißt:
- Die TodoList- Komponente fügt den Datenwert in ihre myTask- Eigenschaft ein und übergibt ihn an die TodoItem- Komponente
- Von der TodoItem- Komponente übertragene Daten werden von der handleChange () -Funktion der TodoList- Komponente empfangen und verarbeitet
Genug Theorie. Schauen wir uns ein Beispiel an.
@Eingabe und Ausgabe in Aktion.
Achten Sie auf
ein Beispiel.Hier habe ich 2 Komponenten erstellt, die
Hallo- Komponente, die in der
App- Komponente verschachtelt ist. Die
Hallo- Komponente hat
Eingabe und
Ausgabe :
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
Die
Hallo- Komponente erwartet, einen Zeichenfolgenwert zu erhalten und diesen als Wert der
myFriend- Eigenschaft zu setzen.
@Input() myFriend: string
Jedes Mal, wenn Sie darauf klicken,
überträgt die
onClick- Eigenschaft zum Senden von Daten des
Ausgabedekorators eine Zeichenfolge mit dem Inhalt von "Neo" an die "Außenwelt".
<h3 (click)="onClick.emit('Neo')">
Unten ist der
App- Komponentencode:
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
Beachten Sie, dass die
App- Komponente das
Hallo- Komponenten-Tag in ihrer Vorlage verwendet, das zwei Aktionen ausführt:
- Übergibt den Wert der Zeichenfolge 'Angular' mithilfe der Eigenschaft ng an die Hallo- Komponente
- und empfängt den gesendeten Wert von der Hallo-Komponente und verarbeitet den empfangenen Wert mit der Funktion upCase ():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Sie können die Anwendung hier in Aktion
sehen.