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

Question

我已经看过chain个类似的问题，但没有成功。问题中提到的弹似乎坏了。

我正在尝试从子组件的[[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>

这里是this演示了此问题。父组件是称为“ home”的页面，子组件是名为“ childinput”的组件。

我做错了吗？还是在Angular中根本不可能了？

Answer 1

只需将emitInputValue更改为inputValueChange。

Fixed Stackblitz

Answer 2

childinput.component.html

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

home.html和home.ts 改变

<app-childinput [(inputValue)]="thevalue" ></app-childinput>

到

<app-childinput [inputValue]="thevalue" (emitInputValue)="update($event)" ></app-childinput>


update(event) {
    this.thevalue = event;
  }

您声明了Output EventEmitter emitInputValue，但未正确发出它。 [(ngModel)]是两种绑定方式，您可以将其与输入修饰符inputValue

混合使用