Angular组件间变量传递问题：textColor更新失效求解决方案

我需要将VerificationIndicator组件的textColor变量值传递给VerificationGrid组件，尝试使用Input和Output装饰器实现后，发现仅能获取textColor的初始值，后续更新无法同步到目标组件。请问该如何解决此问题？

HTML 代码 #

<app-verification-grid
                  [verificationGroupData]="
                    returnVerificationGroupLoadCaseDataBasedOnLoadCaseId(
                      x.CarPassengersStatusLaw.LoadCaseId
                    )
                  "
                  [verificationCriterions]="filterVerificationBaseCriterions()"
                  [testId]="x.Id"
                  [textColor]="textColor">
</app-verification-grid>

 <verification-indicator-cell style="padding-top:3px"
    [data]="findTargetToDisplay(vv,vcv.Unit)" (textColorChange)="textColor = $event">
     </verification-indicator-cell>

VerificationGrid 组件代码 #

@Component({
  selector: 'app-verification-grid',
  templateUrl: './verification.grid.component.html',
  styleUrls: ['./verification.grid.component.scss']
})
export class VerificationGrid implements OnInit {

  @Input()
  verificationGroupData: VerificationCriterionGroupLoadCase;

  @Input()
  verificationCriterions: Array<VerificationCriterion> = [];

  @Input()
  testId:any;

  @Input()
  textColor: string = 'white';

  noTarget: string = ""

  constructor(private translate: TranslateService) { }

  ngOnInit(): void {
  }

  getValue(i:any, j:any) {

    if(this.verificationCriterions.length < 1) return "-";

    // 检查是否为某一对"行"和"列"定义了判定条件
    let verificationCriterionsThatMatch = this.verificationCriterions.filter(x =>
      (x.VerificationCriterionGroup2.ID === this.verificationGroupData.Rows[i].ID ||
        x.VerificationCriterionGroup2.ID === this.verificationGroupData.Columns[j].ID) &&
       (x.VerificationCriterionGroup1.ID === this.verificationGroupData.Rows[i].ID ||
       x.VerificationCriterionGroup1.ID === this.verificationGroupData.Columns[j].ID) 
       )

    if (isNullOrUndefined(verificationCriterionsThatMatch) ||
        verificationCriterionsThatMatch.length < 1)
    {
        return "-";
    }

    if (verificationCriterionsThatMatch.length > 1)
    {
        return "*";
    }

    // 仅存在一条判定条件
    let verificationCriterion = verificationCriterionsThatMatch[0];

    if (verificationCriterion.VerificationValues.length < 1)
    {
        return "-";
    }

    // 根据当前测试ID筛选验证值
    let filteredValues = verificationCriterion.VerificationValues.filter(x => x.TestID == this.testId);

    if (filteredValues.length < 1)
    {
        return "-";
    }

    this.noTarget = '';

    if (filteredValues[0].VerificationTargets.length < 1) {
        this.noTarget = 'rgb(211, 211, 211)';
    }

    // 如果一个条件对应多个值（可能来自多个序列），返回最小值
    return filteredValues.reduce((x:any,y:any) => x.ValueDouble < y.ValueDouble ? x : y).ValueDouble;
  }
  
  calculateBackgroundColor(i: any, j: any)
  {
    let value = this.getValue(i,j);   

    switch(value)
    {
      case "-":
        return 'rgb(211, 211, 211)'; // 灰色
      case "*":
        return 'rgb(102, 153, 204)'; // 蓝色

        default:
         return  this.noTarget === 'rgb(211, 211, 211)' ? 'rgb(211, 211, 211)' : this.textColor;
  }
}
}

VerificationIndicator 组件代码 #

@Component({
  selector: "verification-indicator-cell",
  templateUrl: "./verification.indicator.component.html",
  styleUrls: ["./verification.indicator.component.scss"],
})
export class VerificationIndicator implements OnInit {
  @Input()
  data: any;

  @Output() 
  textColorChange = new EventEmitter<string>();
  
  
  textColor: string = "white";

  calculateIndicator(): void {
    
    //... 其他逻辑代码

    this.isRedCondition()
      ? (this.textColor = "red")
      : this.isGreenCondition()
      ? (this.textColor = "rgb(87, 165, 68)")
      : (this.textColor = "gold");

      this.textColorChange.emit(this.textColor);
  }

  ngOnInit(): void {
    this.verificationTarget = this.data["VerificationTarget"];
    this.calculateIndicator();
  }

  ngOnChanges(): void {
    this.calculateIndicator();
  }
}

问题核心在于变更检测机制未正确触发以及属性更新后的逻辑未同步执行，以下是具体修复步骤：

1. 将父组件的textColor改为响应式变量
   Angular默认变更检测对普通字符串的赋值虽然能触发更新，但使用可观察对象能更稳定地传递状态变化，尤其适用于跨组件的状态同步。在父组件中修改：

   import { BehaviorSubject } from 'rxjs';
   
   // 替换原有普通字符串变量
   private _textColor = new BehaviorSubject<string>('white');
   textColor$ = this._textColor.asObservable();
   
   // 接收子组件的颜色更新
   onTextColorChange(color: string) {
     this._textColor.next(color);
   }
   

   对应HTML模板修改为：

   <app-verification-grid
     [textColor]="textColor$ | async"
     <!-- 其他属性保持不变 -->
   ></app-verification-grid>
   
   <verification-indicator-cell
     [data]="findTargetToDisplay(vv,vcv.Unit)"
     (textColorChange)="onTextColorChange($event)"
   ></verification-indicator-cell>
   

2. 在VerificationGrid中监听textColor变更
   当前VerificationGrid仅初始化时接收textColor，后续更新未触发背景色计算逻辑。添加OnChanges钩子监听属性变化：

   import { OnChanges, SimpleChanges } from '@angular/core';
   
   // 实现OnChanges接口
   export class VerificationGrid implements OnInit, OnChanges {
   
     // ... 原有代码保留
   
     ngOnChanges(changes: SimpleChanges): void {
       // 当textColor变化时，模板中调用的calculateBackgroundColor会自动重新执行
       // 若存在自定义缓存逻辑，需在此手动清除或触发重新计算
     }
   }
   

3. 优化父组件中数据方法的调用
   模板中直接调用returnVerificationGroupLoadCaseDataBasedOnLoadCaseId和filterVerificationBaseCriterions会导致每次变更检测都生成新对象，干扰textColor的更新同步。建议将结果缓存到组件变量：

   // 父组件中添加变量
   verificationGroupData: VerificationCriterionGroupLoadCase;
   verificationCriterions: VerificationCriterion[] = [];
   
   ngOnInit(): void {
     this.updateVerificationData();
   }
   
   // 按需调用此方法更新数据
   updateVerificationData(): void {
     this.verificationGroupData = this.returnVerificationGroupLoadCaseDataBasedOnLoadCaseId(x.CarPassengersStatusLaw.LoadCaseId);
     this.verificationCriterions = this.filterVerificationBaseCriterions();
   }
   

   模板对应修改：

   <app-verification-grid
     [verificationGroupData]="verificationGroupData"
     [verificationCriterions]="verificationCriterions"
     [testId]="x.Id"
     [textColor]="textColor$ | async">
   </app-verification-grid>
   

4. 验证VerificationIndicator的事件触发逻辑
   确保calculateIndicator方法在data变化时（通过ngOnChanges）正确调用了textColorChange.emit(this.textColor)，保证颜色变更能及时传递到父组件。

内容的提问来源于stack exchange，提问作者Turing99