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

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

Answer 2

Просто измените emitInputValue на inputValueChange.

Фиксированный стек-блиц