Question

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

＆＃34; I＆＃34;是输入的索引，因为在组件中有许多输入要检查。

子组件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);
  }

}

这个发布的代码可以解决这个问题，所以问题是，如何使用更正的答案（correctAnswer）更新子组件的输入？

Answer 1

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

@Input() validated: String;

您可以使用ngOnChanges()

检测输入更改

<强>可替换地：

将关于拼写检查程序的所有逻辑移到服务中。

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

另外，我不认为拼写检查员需要知道字段和索引。使用文本输入应该是好的：

export class SpellCheckerService {

  validate(str): String {

  }

根据您如何构建所有内容，我认为它甚至可能最适合/utils文件夹。

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

1 个答案: