Angular5-从子组件的输入的[[ngModel)]绑定更改父级的属性 [英] Angular5 - Change parent's property from child component's input's [(ngModel)] binding
问题描述
我已经查看了此没有成功的类似问题.问题中提到的弹枪似乎坏了.
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
.
这篇关于Angular5-从子组件的输入的[[ngModel)]绑定更改父级的属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!