Förstå @Input, @Output och EventEmitter i Angular

BY admin
|

För dem som är nya i Angular är Input- och Output-dekoratorerna lite förvirrande, särskilt när du studerar dem genom att titta på exempelkod. I den här artikeln ska jag försöka förklara dem på enklast möjliga sätt.

Ett verktyg för att utbyta data

För det första är tanken med Input och Output att utbyta data mellan komponenter. De är en mekanism för att skicka/ta emot data från en komponent till en annan.

Input används för att ta emot data in medan Output används för att skicka ut data. Output skickar ut data genom att exponera händelseproducenter, vanligtvis EventEmitter-objekt.

Så när du ser kod som denna

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

det betyder

  • här förväntar jag mig att data skickas till mig. Jag tar emot den och lagrar den i min item-egenskap
  • förresten kommer jag att producera och skicka ut data via onChange-egenskapen.

Säg att du har en TodoList-komponent som innehåller TodoItem-komponenten. I TodoList-mallen förväntas du se

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

vilket innebär

  • TodoList lägger datavärden i sin myTask-egenskap och skickar den till TodoItem
  • Data som sänds ut från TodoItem kommer att tas emot och hanteras av handleChange()-funktionen i TodoList

Det var allt för teorin. Låt oss ta en titt på exemplet.

@Input och @Output i praktiken

Kontrollera det här exemplet. Här har jag skapat 2 komponenter, hello component nested inside the app component. Komponenten hello har en Input och 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 förväntar sig att ta emot ett strängvärde och lagrar det i egenskapen myFriend.

@Input() myFriend: string

Varje gång du klickar på den kommer Output-egenskapen onClick att sända strängen ”Neo” till omvärlden.

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

Nedan visas 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 att app-komponenten använder taggen hello i sin mall och gör två saker:

  • Genom att skicka ett strängvärde ”Angular” till hello via dess ng-egenskap
<hello myFriend="{{ ng }}"
  • Motta emot det utsända värdet från hello och bearbeta det värdet med funktionen upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Du kan se appen i aktion här