import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { fieldA = ""; fieldB = `Hello ${this.fieldA}`; changeFieldA(){ this.fieldA = "World"; } }Cuando se activa el método "changeFieldA", como encontré en este momento, fieldB sigue siendo "Hello", en lugar de "Hello World". Quiero hacer que el campo B sea "reactivo" para el campo A, de modo que cada vez que cambie el valor del campo A, el valor del campo B cambiará instantáneamente en ese momento.
No quiero agregar una línea adicional de código en el método "changeFieldA", como:
this.fieldB = `Hello ${this.fieldA}`;para actualizar manualmente el campo B. Quiero que el proceso de actualización sea totalmente automático, porque en el proyecto tengo un campo que es un gran objeto anidado que contiene matrices anidadas, lo que hace que la actualización manual sea muy trivial.
Hay otras formas de hacerlo, pero la forma más sencilla para este caso particular sería llamar a una función dentro de changeFieldA que restablece el valor de fieldB . Por ejemplo:
private syncFieldB() { this.fieldB = `Hello ${this.fieldA}`; } changeFieldA(){ this.fieldA = "World"; this.syncFieldB(); } La lógica complicada de establecer fieldB puede estar contenida en la función syncFieldB . Si necesita establecer el valor de fieldB cada vez que se modifica el valor de fieldA (quizás fuera de la función changeFieldA ), entonces tal vez podría usar get/set:
private _fieldA = ""; get fieldA() { return this._fieldA; } set fieldA(value) { this._fieldA = value; this.syncFieldB(); } Este método no requiere que llames a syncFieldB dondequiera que modifiques fieldA .
podrías cambiar
fieldB = `Hello ${this.fieldA}`;a
get fieldB() { return `Hello ${this.fieldA}`; }por lo que fieldB es una propiedad calculada de solo lectura.
Sin embargo, probablemente sea mejor reemplazar la propiedad fieldB con un método, no un captador, porque eso confunde a la gente, incluyéndote a ti cuando vuelves a este código meses y meses después. ;-)