angular - 在 Angular 中,当另一个依赖字段成员更改时,如何自动更改组件或服务中的字段成员?

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";
  }
}

当“changeFieldA”方法被触发时,我发现此时fieldB仍然是“Hello”,而不是“Hello World”。我想让 fieldB 对 fieldA “反应”,这样每当 fieldA 的 value 改变时, fieldB 的 value 就会立即改变。

我不想在“changeFieldA”方法中添加额外的代码行,例如:

this.fieldB = `Hello ${this.fieldA}`;

以便手动更新字段B。我想让更新过程完全自动化,因为在项目中我有一个字段,它是一个包含嵌套数组的大型嵌套对象,这使得像这样的手动更新非常简单。

回答1

还有其他方法可以做到这一点,但对于这种特殊情况,最简单的方法是调用 changeFieldA 中的一个函数来重置 fieldB 的 value。例如:

private syncFieldB() {
  this.fieldB = `Hello ${this.fieldA}`;
}
      
changeFieldA(){
  this.fieldA = "World";
  this.syncFieldB();
}

设置 fieldB 的复杂逻辑可以包含在 syncFieldB 函数中。如果您需要在 fieldA 的 value 被修改(可能在 changeFieldA 函数之外)时设置 fieldB 的 value,那么也许您可以使用 get/set:

private _fieldA = "";

get fieldA() {
  return this._fieldA;
}

set fieldA(value) {
  this._fieldA = value;
  this.syncFieldB();
}

此方法不需要您在修改 fieldA 的任何位置调用 syncFieldB

回答2

你可以改变

fieldB = `Hello ${this.fieldA}`;

get fieldB() {
  return `Hello ${this.fieldA}`;
}

所以 fieldB 是一个只读的计算属性。

但是,最好将 fieldB 属性替换为一个方法,而不是一个 getter,因为这会让人们感到困惑,包括当你几个月和几个月后回到这段代码时的你。 ;-)

相似文章

最新文章