[英]Angular Observable Get updated changed object from a parent to child component
[英]Angular 4: How can I get the Parent Component's value to be updated by a changed value in a child Component without the Parent doing any extra work
我希望能够完成自动更新(父控制器中的父控制器中的属性的2向binding0,而父控制器不知道需要将@Output事件传递到子控制器中,就像我在下面这样:
应用程式
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<div class="app">
Parent: {{ myValue }}
<myinput
[(zModel)]='myValue'
(zChange)='valueChanged($event)'
></myinput>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
myValue: string = 'Hello World';
valueChanged(event) {
//alert('app: onchange (' + event + ")");
this.myValue = event;
}
}
MyinputComponent
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'myinput',
template: `
<hr>
<div >
Inside Component: <u>{{ zModel }}</u> <br/><br/>
<input type="text"
[(ngModel)]="zModel"
(input)="valueChanged($event)"
>
</div>
`
})
export class MyinputComponent {
@Input()
zModel: string = '';
@Output()
zChange: EventEmitter<string> = new EventEmitter<string>();
valueChanged(item){
//alert('onchange (' + this.zModel + ')');
this.zChange.emit(this.zModel);
}
}
如果不做任何额外的工作 ,则意味着您要从父级中删除方法valueChanged
。 如果是这样,则通过标记双向绑定,您将走在正确的轨道上:
[(zModel)]='myValue'
要实现双向绑定,您需要在子级中进行更改的唯一事情是实际上将后缀Change
添加到变量的确切名称。 所以代替
@Output()
zChange: EventEmitter<string> = new EventEmitter<string>();
它应该是
@Output()
zModelChange: EventEmitter<string> = new EventEmitter<string>();
因为您的@Input
被标记为zModel
。
当然这也意味着在子valueChanged
您需要标记正确的变量名称:
valueChanged(item){
this.zModelChange.emit(this.zModel);
}
因此,在完成这些更改后,您可以从父项中删除valueChanged
,而子项标签将如下所示:
<myinput [(zModel)]='myValue'></myinput>
这是您更新的Plunker: http ://plnkr.co/edit/eYx5wXnYauzqKXtduOvX?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.