Angular2 - 将输入验证数据从父输入传递到子输入

Posted 2023-03-13

【中文标题】Angular2 - 将输入验证数据从父输入传递到子输入

【英文标题】：Angular2 - Pass input validation data from parent to child input

【发布时间】：2017-05-17 23:22:20

【问题描述】：

我正在 Angular2 中创建某种自动单词校正模块。

我的子组件中有一个 EventEmitter 设置

import Component, Input, Output, EventEmitter from '@angular/core';
...
export class StudyThumbsComponent
  @Output() notify: EventEmitter<any> = new EventEmitter();
  ...
  verify(input, i) 
    this.answer.input = input;
    this.answer.id = i;
    this.notify.emit(this.answer);
  

“i”是输入的索引，因为组件中有许多输入要检查。

子组件html：

<input type="text" [(ngModel)]="item.input" (keyup)="verify($event, i)">

自动单词校正的逻辑在父组件中，因为可能有不同类型的子组件需要自动单词校正功能：

export class ParentComponent
  verify(event:any, i) 

    var answer = event.target.value;

    // the variable answer gets corrected/modified and assigned to...
    var correctedAnswer;

  

  onNotify(answer) 
    this.verify(answer.input, answer.id);
  

这个发布的代码在这一点上有效，所以问题是，我如何用更正的答案 (correctedAnswer) 更新孩子的组件输入？

【参考方案1】：

在您的子组件中有一个@Input string，用于接收每个验证的输出。该验证变量将由父级的 verify 函数更改。

@Input() validated: String;

您可以使用ngOnChanges() 检测输入更改

或者：

将有关拼写检查器的所有逻辑移至服务中。

然后您可以在您需要使用拼写检查器的所有组件上导入该服务。

另外，我认为拼写检查器不需要了解字段或索引。用文本输入应该很好：

export class SpellCheckerService 

  validate(str): String 

  

根据您对所有内容的结构，我认为它甚至可能最适合放入 /utils 文件夹。

【讨论】：

谢谢 zurfyx。两者似乎都运作良好。选择第一个选项，因为它更好地匹配我的代码的其他部分。