Verstehen von @Input, @Output und EventEmitter in Angular

BY admin
|

Für diejenigen, die neu in Angular sind, sind die Input- und Output-Dekoratoren ein wenig verwirrend, besonders wenn man sie anhand von Beispielcode studiert. In diesem Artikel werde ich versuchen, sie auf die einfachste Art und Weise zu erklären.

Ein Werkzeug, um Daten auszutauschen

Zunächst einmal besteht die Idee von Input und Output darin, Daten zwischen Komponenten auszutauschen. Sie sind ein Mechanismus zum Senden/Empfangen von Daten von einer Komponente zur anderen.

Input wird verwendet, um Daten zu empfangen, während Output verwendet wird, um Daten zu senden. Output sendet Daten aus, indem es Ereignisproduzenten, normalerweise EventEmitter-Objekte, exponiert.

Wenn du also Code wie diesen siehst

@Component({
selector: 'todo-item',
...
})export class TodoItemComponent {
@Input() item
@Output() onChange = new EventEmitter()
}

das bedeutet

  • hey, ich erwarte, dass Daten an mich gesendet werden. Ich empfange sie und speichere sie in meiner Item-Eigenschaft
  • Nebenbei werde ich Daten produzieren und über die onChange-Eigenschaft versenden.

Angenommen, Sie haben eine TodoList-Komponente, die die TodoItem-Komponente enthält. In der TodoList-Vorlage erwarten Sie

...
<todo-item
="myTask"
(onChange)="handleChange($event)"
</todo-item>
...

das bedeutet

  • TodoList legt Datenwerte in seine myTask-Eigenschaft und übergibt sie an TodoItem
  • Die von TodoItem ausgegebenen Daten werden von der handleChange()-Funktion in TodoList

Das war’s mit der Theorie. Schauen wir uns das Beispiel an.

@Input und @Output in Aktion

Schauen wir uns dieses Beispiel an. Hier habe ich 2 Komponenten erstellt, die Hallo-Komponente, die innerhalb der App-Komponente verschachtelt ist. Die Hallo-Komponente hat einen Input und einen Output

hello.component.ts
@Component({
selector: 'hello',
template: `
<h3 (click)="onClick.emit('Neo')">
...
</h3>
`
})export class HelloComponent {
@Input() myFriend: string
@Output() onClick = new EventEmitter()
}

Sie erwartet einen String-Wert und speichert ihn in der myFriend-Eigenschaft.

@Input() myFriend: string

Bei jedem Mausklick wird über die Output-Eigenschaft onClick ein String ‚Neo‘ an die Außenwelt ausgegeben.

<h3 (click)="onClick.emit('Neo')">

Unten ist die App-Komponente

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-Tag in ihrer Vorlage verwendet und zwei Dinge tut:

  • Übergabe eines String-Wertes ‚Angular‘ an hello über seine ng-Eigenschaft
<hello myFriend="{{ ng }}"
  • Empfang des ausgegebenen Wertes von hello und Verarbeitung dieses Wertes durch die Funktion upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Sie können die App hier in Aktion sehen