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

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">

我对双向绑定(bind)还不太熟悉，但似乎无法弄清楚。我理解这个概念，但仍在掌握它的语法。

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

编辑:

这是我的错误信息:

异常:类型错误:无法读取 [itemInput.length <= 0] 中未定义的属性“长度”

Answer 1

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

子组件:

@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