如何在特定输入标记下子组件angular4中传递和显示来自服务的验证错误

import { Injectable } from '@angular/core';

@Injectable()
export class ValidationService {
  private errors: any = {};

  constructor() { }

  validate(input: string): void {
    // 进行验证逻辑，将错误存储在errors对象中
    if (input.length < 5) {
      this.errors.inputLength = '输入长度必须大于等于5';
    } else {
      delete this.errors.inputLength;
    }
  }

  getErrors(): any {
    return this.errors;
  }
}

import { Component } from '@angular/core';
import { ValidationService } from './validation.service';

@Component({
  selector: 'app-child',
  template: `
    <div>
      <input [(ngModel)]="inputValue" (blur)="validateInput()">
      <div *ngIf="validationService.getErrors().inputLength">{{ validationService.getErrors().inputLength }}</div>
    </div>
  `,
  providers: [ValidationService]
})
export class ChildComponent {
  inputValue: string;

  constructor(public validationService: ValidationService) { }

  validateInput(): void {
    this.validationService.validate(this.inputValue);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent { }

<app-parent></app-parent>