Estou preparando uma apresentação sobre o tópico de gerenciamento de estado do Angular para meus colegas. O foco principal da palestra é criar componentes "burros" que aceitam entradas de componentes pais, renderizam esses dados em uma IU e emitem alterações nas saídas. A parte importante é que eles não armazenam nenhum estado próprio (apenas propriedades computadas e computed
sinais no Angular v17+). Isso ajuda nossa equipe a criar componentes que não têm problemas de detecção de alterações, não podem ter inconsistências de estado entre componentes pais e filhos e respeitam o fluxo de dados unidirecional.
Uma das equipes para as quais farei a apresentação está usando Angular Forms, o que significa que seus componentes implementam ControlValueAccessor
, o que significa que eles também podem aceitar valores por meio do writeValue
método. Isso significa que seus componentes têm um estado interno e, como eles também podem aceitar valores de @Input
s, bugs estranhos podem acontecer, especialmente ao integrá-los com nossa base de código que não usa Angular Forms.
Qual é a explicação oficial de por que essas duas abordagens são tão diferentes?
Como uma abordagem em que um componente obtém valores de @Input
s pode ser unificada com uma abordagem em que obtém valores de writeValue
? É possível criar um componente que seja compatível com Angular Forms e não contenha nenhum estado próprio?
Existe uma maneira de implementar Angular Forms onde os componentes recebem seus valores via @Input
s (ou input
sinais no Angular 17+)?
O ChatGPT sugeriu o seguinte:
@Input() value: any;
writeValue(value: any): void {
this.value = value;
}
Mas, de tudo que sei sobre Angular, escrever para um @Input
é uma péssima ideia e nem é possível com sinais no Angular 17+.