Angular5 - 从子组件的输入[(ngModel)]绑定更改父级属性

Question

我已经看过这个类似的问题没有成功.问题中提到的掠夺者似乎被打破了.

我试图从子组件的[(ngModel)]绑定更新父组件的属性.

这是子组件HTML:

<div class="elastic-textarea">
    <ion-input rows="1"  [value]="inputValue" [(ngModel)]="inputValue" (ngModelChange)="change($event)" ></ion-input>
    </div>

这是子组件TS:

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';

@Component({
  selector: 'app-childinput',
  templateUrl: './childinput.component.html',
  styleUrls: ['./childinput.component.css']
})
export class ChildinputComponent  {
@Input() inputValue: string;
  @Output() emitInputValue = new EventEmitter();
  constructor() { }

change(newValue) {
    console.log('newvalue', newValue)
    this.inputValue = newValue;
    this.emitInputValue.emit(newValue);
  }
}

这就是我在父组件中使用子组件的方式:

<app-childinput [(inputValue)]="thevalue" ></app-childinput>
<p>The changed value should be reflected here: {{thevalue}}</p>

这是STACKBLITZ展示的问题.父组件是调用"home"的页面,子组件是名为"childinput"的组件.

我做错了什么,或者这在Angular中根本不可能？

Answer 1

只需emitInputValue改为inputValueChange.

修复了Stackblitz