如何在同一页面复用Angular组件并绑定不同属性值

首先要肯定你的思路：通过@Input()接收父组件传递的FormControl和字段名称prop，实现验证提示组件的复用，这个方向完全没问题，当前代码也能正常工作。不过我们可以从简洁性、健壮性、复用性几个维度做一些优化：

一、移除重复的条件判断 #

父组件调用时的*ngIf="description.invalid && (description.dirty || description.touched)"是多余的——因为你的子组件内部已经做了完全一样的判断。移除这个重复条件后，父组件的调用会更简洁，而且逻辑统一维护在子组件里，后续修改更方便：

<!-- 优化后的父组件调用 -->
<creat-task-validation [prop]="'Description'" [form]="description"></creat-task-validation>

二、优化翻译文本的写法 #

当前用{{prop + 'is required .' | translate}}做字符串拼接，不仅容易出现空格问题（比如现在会变成Descriptionis required .，少了空格），也不符合国际化的最佳实践。建议用翻译占位符：

1. 先在翻译文件中定义带占位符的文案：

// 示例en.json
{
  "FIELD_REQUIRED": "{{field}} is required."
}

2. 子组件模板中改用占位符传递参数：

<div *ngIf="form.invalid && (form.dirty || form.touched)" class="alert alert-danger padding-5">
  <div *ngIf="form.errors?.required">
    {{ 'FIELD_REQUIRED' | translate: { field: prop } }}
  </div>
</div>

这样既解决了空格问题，也让翻译文案更灵活。

三、增强组件的健壮性 #

给@Input()添加类型约束和默认值，避免出现undefined的情况：

import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'creat-task-validation',
  templateUrl: 'creat-task-validation.component.html'
})
export class CreatTaskValidationComponent implements OnInit {
  // 用非空断言确保输入必传，或者根据需求设置默认值
  @Input() form!: FormControl;
  @Input() prop = '';

  constructor() {}
  ngOnInit(){}
}

另外注意类名的拼写错误：CreatTaskValidationComponent建议改为CreateTaskValidationComponent（creat→create），对应的selector也同步改成create-task-validation，符合英文拼写规范。

四、扩展组件的复用性 #

当前组件只处理了required错误，如果想让它支持更多验证规则（比如minlength、maxlength、pattern等），可以扩展子组件的逻辑：

<div *ngIf="form.invalid && (form.dirty || form.touched)" class="alert alert-danger padding-5">
  <div *ngIf="form.errors?.required">
    {{ 'FIELD_REQUIRED' | translate: { field: prop } }}
  </div>
  <div *ngIf="form.errors?.minlength">
    {{ 'FIELD_MIN_LENGTH' | translate: { field: prop, length: form.errors.minlength.requiredLength } }}
  </div>
  <div *ngIf="form.errors?.maxlength">
    {{ 'FIELD_MAX_LENGTH' | translate: { field: prop, length: form.errors.maxlength.requiredLength } }}
  </div>
</div>

对应的翻译文件补充相应文案即可，这样你的验证组件就能适配更多场景了。

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