Angular验证过程中自定义组件未更新的问题求助

我编写了一个用于显示验证消息的Angular组件，代码如下：

@Component({
  selector: 'app-error-msg',
  template: `
  <div *ngIf="showItem()" [class]="'text-error-small {class}'"> 
    <ng-content></ng-content>
  </div>
`,
  styleUrls: ['./error-msg.component.css']
})
export class ErrorMessageComponent {
  @Input() item: any;
  @Input() class = "";
  @Input() useTouched = true;

  showItem() {
    if(this.item.valid)
      return false;
    if(this.useTouched && ! this.item.touched)
      return false;
    return true;
  }
}

使用方式如下：

<input class="p-1" myValidator [(ngModel)]="param.parameter" #sample/>
<app-error-msg [item]="sample">
    Please enter a valid name.
</app-error-msg>

其中myValidator是可正常工作的验证器，问题在于：尽管每次按键时验证器都会被调用，但app-error-msg组件的HTML不会重新计算，请问哪里出错了？

核心原因 #

Angular的变更检测机制无法自动追踪模板中方法调用（showItem()）的依赖变化。当表单控件的valid或touched属性更新时，Angular不知道这些变化会影响showItem()的返回值，因此不会触发组件的重新渲染。

另外，模板中的[class]绑定存在语法错误：'text-error-small {class}'会把{class}作为字符串字面量，无法正确拼接传入的类名，应该改为'text-error-small ' + class。

解决方案一：使用Getter属性替代方法（简单高效） #

将showItem()方法改为getter属性，Angular会自动追踪getter中依赖的属性变化：

export class ErrorMessageComponent {
  @Input() item: any;
  @Input() class = "";
  @Input() useTouched = true;

  get shouldShow() {
    if(this.item.valid)
      return false;
    if(this.useTouched && ! this.item.touched)
      return false;
    return true;
  }
}

模板修改为：

<div *ngIf="shouldShow" [class]="'text-error-small ' + class"> 
  <ng-content></ng-content>
</div>

解决方案二：响应式监听控件状态（推荐，更符合Angular响应式理念） #

通过监听表单控件的statusChanges流，主动更新显示状态，并在组件销毁时清理订阅：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-error-msg',
  template: `
  <div *ngIf="shouldShow" [class]="'text-error-small ' + class"> 
    <ng-content></ng-content>
  </div>
`,
  styleUrls: ['./error-msg.component.css']
})
export class ErrorMessageComponent implements OnInit, OnDestroy {
  @Input() item: any;
  @Input() class = "";
  @Input() useTouched = true;
  shouldShow = false;
  private destroy$ = new Subject<void>();

  ngOnInit() {
    // 监听控件状态变化，更新显示状态
    this.item.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
      this.shouldShow = this.calculateShowState();
    });
    // 初始化时计算一次初始状态
    this.shouldShow = this.calculateShowState();
  }

  ngOnDestroy() {
    // 清理订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }

  private calculateShowState() {
    if(this.item.valid)
      return false;
    if(this.useTouched && ! this.item.touched)
      return false;
    return true;
  }
}

这种方式能更精准地响应控件状态变化，同时避免不必要的变更检测触发。

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