Tengo una entrada que tiene un valor recibido como entrada de otro componente:
<input [value]="myInput.something"> <span (click)="incrementPlus()">+</span> Necesitaría una función simple que aumente el valor de la entrada en cada clic en un número de mi elección. Es algo muy simple, excepto que el valor de entrada se me pasa en:
@Input() myInput: number;
y no tengo que crear una variable donde guardo el valor, ya que tengo que repetirlo/reutilizarlo en muchas otras entradas. Repito: normalmente es simple ya que podría pasar la entrada @ a la función, modificarla, guardarla en una variable y luego pasar la variable al valor de entrada html. Pero tengo que reutilizarlo en otras entradas html, y escribir muchas variables no me parece una buena práctica.
No es como todas las otras preguntas que he visto antes, ya que todas cambian un valor de forma estática o lo envuelven en una variable, y no quiero hacer esto.
Si también desea cambiar el valor en los componentes principales , deberá trabajar con @Output y enlace bidireccional. Cuando ingrese el cambio, llamará al emit del EventEmitter de salida para notificar al padre que el valor ha cambiado.
Para el enlace bidireccional, la salida debe tener el mismo nombre que su entrada, más Change .
En el niño, pones:
@Input() something: number; @Output() somethingChange = new EventEmitter<number>();Y en el padre:
[(something)]="theValue" Luego, cuando somethingChange.emit cambia. emite algún valor, cambia el del padre y también se lo pasa a su hijo.
Aquí hay un ejemplo completo: https://stackblitz.com/edit/angular-en58l5?file=src%2Fapp%2Fhello.component.ts