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

Angular5 - Change parent#39;s property from child component#39;s input#39;s [(ngModel)] binding(Angular5 - 从子组件的输入的 [(ngModel)] 绑定更改父的属性)

问题描述

我已经看过 这个 类似的问题没有成功.问题中提到的plunker似乎坏了.

I have already looked at this similar question without success. The plunker mentioned in the question seems to be broken.

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

I am trying to update parent component's property from child component's [(ngModel)] binding.

这是子组件 HTML:

This is the child components 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);
  }
}

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

This is how I'm using the child component in the parent component:

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

这是 STACKBLITZ 证明问题.父组件是名为home"的页面，子组件是名为childinput"的组件.

Here is a STACKBLITZ demonstrating the issue. The parent component is the page callled "home", and the child component is the component called "childinput."

是我做错了什么还是在 Angular 中这根本不可能?

Am I doing something wrong or is this simply not possible anymore in Angular?

推荐答案

只需将emitInputValue改为inputValueChange即可.

固定 Stackblitz

这篇关于Angular5 - 从子组件的输入的 [(ngModel)] 绑定更改父的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！