Forståelse af @Input, @Output og EventEmitter i Angular

BY admin
|

For dem, der er nye i Angular, er Input- og Output-dekoratorerne en smule forvirrende, især når du studerer dem ved at se på eksempelkode. I denne artikel vil jeg forsøge at forklare dem på den enkleste måde.

Et værktøj til at udveksle data

Først og fremmest er idéen med Input og Output at udveksle data mellem komponenter. De er en mekanisme til at sende/modtage data fra en komponent til en anden.

Input bruges til at modtage data ind, mens Output bruges til at sende data ud. Output sender data ud ved at eksponere hændelsesproducenter, normalt EventEmitter-objekter.

Så når du ser kode som denne

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

det betyder

  • hey, jeg forventer, at der bliver sendt data til mig. Jeg modtager den og gemmer den i min item-egenskab
  • i øvrigt vil jeg producere og sende data ud via onChange-egenskaben.

Lad os sige, at du har en TodoList-komponent, der indeholder TodoItem-komponenten. I TodoList-skabelonen forventes du at se

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

hvilket betyder

  • TodoList lægger dataværdier i sin myTask-egenskab og videregiver dem til TodoItem
  • Data, der udsendes fra TodoItem, vil blive modtaget og håndteret af funktionen handleChange() i TodoList

Det var det for teorien. Lad os se på eksemplet.

@Input og @Output i aktion

Kig på dette eksempel. Her har jeg oprettet 2 komponenter, hello komponent nested inde i app-komponenten. Hello-komponenten har en Input og en Output 

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

Den forventer at modtage en strengværdi og gemmer den i myFriend-egenskaben.

@Input() myFriend: string

Hver gang du klikker på den, vil Output-egenskaben onClick udsende en streng “Neo” til omverdenen.

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

Nedenfor vises app-komponenten

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>

Bemærk, at app-komponenten bruger hello-tagget i sin skabelon og gør to ting:

  • overfører en strengværdi “Angular” til hello via dens ng-egenskab
<hello myFriend="{{ ng }}"
  • modtager den udsendte værdi fra hello og behandler denne værdi ved hjælp af funktionen upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Du kan se appen i aktion her