angolare ingresso 2 si legano alla funzione di chiamata

Question

È accettabile legare @Input() proprietà del componente figlio a una chiamata di funzione di componente principale, ad esempio:

<navigation 
     [hasNextCategory]="hasNextCategory()" 
     [hasPreviousCategory]="hasPreviousCategory()" 
     (nextClicked)="nextCategory()" 
     (previousClicked)="previousCategory()" 
     (submitClicked)="submit()" 
</navigation> 

Questo sembra funzionare, ma mi chiedo come. Questi input vengono rivalutati quando l'evento viene generato dal componente o cosa determina il binding dell'input?

Answer 1

Sicuro. La funzione viene richiamata ogni volta che viene eseguito il rilevamento delle modifiche e assegna il risultato della chiamata di funzione alla proprietà di input.

Si ottiene un'eccezione in devMode quando 2 chiamate successive restituiscono valori diversi. come

hasNextValue() { 
    return {}; 
} 

Eccezione: Expression è cambiato ...

È scoraggiato di legarsi alle funzioni. Assegna piuttosto il risultato a una proprietà e associa a questa proprietà. Se sai cosa stai facendo, però, va bene.

aggiornamento

così restituendo vero/falso secondo uno stato interno non è consentito? Strano che la mia navigazione funzioni ancora

Questo è effettivamente consentito. Se il tuo stato cambia a causa di alcuni eventi (clic, timeout, ...), il rilevamento del cambiamento angolare prevede modifiche. Se il rilevamento del cambiamento angolare chiama il metodo due volte (come in devMode) senza che si verifichi alcun evento intermedio, allora non si aspetta cambiamenti e lancia l'eccezione sopra menzionata. Ciò che Angular non piace è quando il rilevamento del cambiamento stesso provoca cambiamenti.

Nell'esempio seguente potrebbe anche causare un'eccezione poiché il rilevamento delle modifiche stesso modificherà lo stato dei componenti (this.someState = !this.someState;) che non è consentito.

someState:boolean = false; 
hasNextValue() { 
    this.someState = !this.someState; 
    return this.someState; 
} 

due chiamate successive sarebbero tornati false e true anche quando nessun evento è accaduto in mezzo.

Questo esempio potrebbe funzionare bene se

someState:boolean = false; 

@HostListener('click') { 
    this.someState = !this.someState; 
} 

hasNextValue() { 
    return this.someState; 
} 

perché due chiamate successive (senza comunque tra) restituirà lo stesso valore.