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

在特定输入标记下，子组件可以通过Angular 4中的服务来传递和显示验证错误。以下是一个示例的步骤：

首先，在父组件中创建一个服务，用于处理验证逻辑和错误消息。可以使用Angular的内置表单验证器或自定义验证器来实现验证逻辑。
在子组件中，通过依赖注入的方式将该服务注入到构造函数中。
在子组件的模板中，使用ngIf指令来检查服务中是否存在验证错误，并根据情况显示错误消息。

下面是一个示例代码：

在父组件中的服务文件（validation.service.ts）中：

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

在子组件中的组件文件（child.component.ts）中：

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

在父组件中的组件文件（parent.component.ts）中：

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

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

在父组件的模板文件（parent.component.html）中：