Question

我正在尝试将输入字段中的本地输入从子组件传递到父组件。这是一个例子：

// Parent component export:
itemInput: string;

// Parent component template
<div>
  <add-item [itemInput]="itemInput"></add-item>
</div>
<div [hidden]="itemInput.length <= 0">
  <ul>
    <li *ngIf="checkEntry(itemInput) == true">
      Some data here
    </li>
  </ul>
</div>

// Child Component template
<input type="text" (keyup)="0" #itemInput [(ngModel)]="itemInput.value">

我仍然不太熟悉双向绑定，但似乎无法弄明白。我理解这个概念，但仍然掌握它的语法。

非常感谢任何帮助。另外，如果需要其他信息，请告诉我。感谢

编辑：

这是我的错误消息：

EXCEPTION：TypeError：无法读取[itemInput.length＆lt; = 0]中未定义的属性'length'

Answer 1

为此，请确保为子项1定义输出，这将设置一个事件通道，子项可以通过该通道将更新推送到父项。

子组件：

@Output() itemInput = new EventEmitter()

，模板看起来像

<input type="text" (keyup)="0" #input [(ngModel)]="input.value" (ngModelChange)="itemInput.emit(input)">

然后在父组件模板中变为：

template: `
  <div>
    <add-item (itemInput)="itemInput = $event.value"></add-item>
  </div>
  <div [hidden]="itemInput?.length <= 0"> <!-- or [hidden]="!itemInput || itemInput.length <= 0" -->      
    <ul>
      <li *ngIf="checkEntry(itemInput) == true">
        Some data here
      </li>
    </ul>
  </div>
`

注意表达式?中的[hidden]="itemInput?.length <= 0"，它可以防止您在尚未输入数据时看到的错误。或者你也可以写[hidden]="!itemInput || itemInput.length <= 0"。

演示： http://plnkr.co/edit/Xvu4M9H6iVqGHme4lgxW?p=preview

Answer 2

您需要在子组件中使用@Output() someFieldChange;。

通过致电emit()

通知有关更改

<input type="text" (keyup)="0"  [(ngModel)]="itemInput.value" (ngModelChange)="someFieldChange.emit($event)">

然后你可以在父

中绑定它

<child-comp (someFieldChange)="doSomething()"></child-comp>

将模板定义的局部变量传递给父组件

2 个答案: