typescript - I Angular, kan jag binda det emitterade utdata från en komponent direkt till en egenskap?


Min huvudsakliga applikationskomponent interagerar med underkomponenter genom @Output-dekorerade egenskaper på underkomponenten. Utgångsegenskaperna använder EventEmitter<>(). Ofta sänder egenskapen en enkel boolean eller ett nummer. Jag skulle vilja binda denna utgång direkt till egenskaper i huvudanvändningen. Men jag lyckas inte göra det.

Det jag gör just nu är:

//In my sub component:
@Output() subProperty = new EventEmitter<boolean>();

//In my main template:
<sub-component (subProperty)="setPropertyValue($event)"></subcomponent>

//In my main component (this I would like to avoid):
setPropertyValue(event) {
    this.mainProperty = event;
}

Det jag ville göra var att undvika funktionen i min huvudkomponent och binda direkt till min egenskap, men koden nedan fungerar inte:

//In my sub component:
@Output() subProperty = new EventEmitter<boolean>();

//In my main template:
<sub-component (subProperty)="mainProperty"></subcomponent>

Finns det något sätt jag kan undvika den extra funktionen i min huvudkomponent?

Svar #1

Jag tror det bästa du kan göra är detta:

(subProperty)="mainProperty = $event"

Svar #2

Lägg till suffixet Change i slutet av din egenskap så att du kan använda banan/fotboll i box-syntaxen. Ett matchande input krävs inte och kommer att ignoreras.

//In your sub component:
@Output() subPropertyChange = new EventEmitter<boolean>();
//In your main template:
<sub-component [(subProperty)]="mainProperty"></subcomponent>