大佬教程收集整理的这篇文章主要介绍了angular – @Input是否提供双向绑定？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我做了一个stackblitz以显示问题.这发生在用于Angular 7.0.1的stackblitz中,但在我的本地项目中它也发生在Angular 6.1.2上.
stackblitz显示了一个包含对象的简单父组件.该对象通过@Input传递给子组件.子组件和父组件都具有更改对象的功能.它们也都在模板中显示对象的值.
我希望看到当父对象更改对象时,它会在子对象中更改它.但是,我没想到当孩子改变对象时,它也会改变父对象.然而,stackblitz确实显示了这种行为.我一直以为你需要通过@Output显式地发出一个事件来向父节点发送一个流,然后从子组件中改变它.
this.thing = { name: "world",nbm: 10 };
并且相应地更新父组件中的相应属性.事实并非如此,正如您在this stackblitz中所看到的那样.
但是,由于父组件和子组件具有对同一对象的引用,因此它们都可以修改其中一个属性,并且将在另一个组件中观察到该更改.
为了实现双向绑定,您可以添加具有相同名称的@Output属性,然后添加Change,并在发生更改时发出事件：
@input() thing: any; @Output() thingChange = new EventEmitter(); setNewObject(){ this.thing = { name: "world",nmb: 10 }; this.thingChange.emit(this.thing); }
如果使用双向绑定语法,则更改将反映到父组件：
<child2 [(thing)]="thing"></child2>
有关演示,请参阅this stackblitz.
如果要阻止子组件修改原始对象,则应绑定对象属性而不是对象本身：
@input() thingName: String; @input() thingNmb: number;
<child [thingName]="thing.name" [thingNmb]="thing.nmb"></child>
以上是大佬教程为你收集整理的angular – @Input是否提供双向绑定？全部内容，希望文章能够帮你解决angular – @Input是否提供双向绑定？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。