typescript angular2在子组件中更改@input值然后在父组件中更改此值不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43373122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular2 change @input value in child component then change this value in parent component not work
提问by NieWei
parent component class
父组件类
export class Parent {
show: boolean = false;
constructor() { }
showChild() {
this.show = true;
}
}
parent component template
父组件模板
<child [isShow]="show"></child>
child component class
子组件类
export class Child {
@Input isShow: boolean = false;
constructor() { }
onClick() {
this.isShow = false;
}
}
after I triggered onClick() in child component, the showChild() would not work to show the child component.
在子组件中触发 onClick() 后， showChild() 将无法显示子组件。
why?
为什么？
回答by Pedro Penna
The value is being passed exclusively from parent to child because you're using square brackets.
由于您使用的是方括号，因此该值仅从父级传递给子级。
In order for the value to go both ways, you need to use a two-way data binding.
为了使值双向传递，您需要使用双向数据绑定。
That means your isShow attribute should be like:
这意味着你的 isShow 属性应该是这样的：
@Input() isShow: boolean;
@Output() isShowChange = new EventEmitter<boolean>();
And the template should be
模板应该是
<child [(isShow)]="show"></child>
or
或者
<child [isShow]="show" (isShowChange)="show = $event"></child>
Take a look at the two-way data binding tutorial page:
看一下双向数据绑定教程页面：
回答by Tyler Jennings
You are creating values out of sync between the child and parent. Since the parent is passing the value down into the child, you need to change the value in the parent only. To send a value from the child to the parent you need to use an Outputparameter as an EventEmitter. It will look like this:
您正在创建子级和父级之间不同步的值。由于父级将值向下传递给子级，因此您只需更改父级中的值。要将值从子级发送到父级，您需要使用Output参数作为EventEmitter. 它看起来像这样：
export class Parent {
show: boolean = false;
constructor() { }
showChild() {
this.show = true;
}
}
<child [isShow]="show" (updateValue)="show = $event"></child>
export class Child {
@Input isShow: boolean = false;
@Output() updateValue = new EventEmitter();
constructor() { }
onClick() {
this.updateValue.emit(false);
}
}
This emits the value falsewhen the onClickmethod in the child runs. The parent receives that new value and assigns it to it's showvariable, which gets sent down to the child component.
false当onClick子进程中的方法运行时，它会发出值。父组件接收新值并将其分配给它的show变量，该变量被发送到子组件。
回答by Teddy Sterne
You need to use a getterand setterfor the value so you can use the two-way data binding syntax. This can be accomplished using the following:
您需要使用getterandsetter作为值，以便您可以使用双向数据绑定语法。这可以使用以下方法完成：
export class Child {
private isShowValue = false;
@Input()
public get isShow(){
return this.isShowValue;
}
@Output() isShowChange = new EventEmitter();
set isShow(val) {
this.isShowValue = val;
this.isShowChange.emit(this.isShowValue);
}
constructor() { }
onClick() {
this.isShow = false;
}
}
