angular – @Input是否提供双向绑定？

发布时间：2020-12-17 17:55:24 所属栏目：安全来源：网络整理

导读：我认为@Input工作的方式会直接给出一个很大的“不

我认为@Input工作的方式会直接给出一个很大的“不！”对这个问题.然而,今天我偶然发现了一些奇怪的行为,或者我总是认为关于@Input的错误方法.

我做了一个stackblitz以显示问题.这发生在用于Angular 7.0.1的stackblitz中,但在我的本地项目中它也发生在Angular 6.1.2上.

stackblitz显示了一个包含对象的简单父组件.该对象通过@Input传递给子组件.子组件和父组件都具有更改对象的功能.它们也都在模板中显示对象的值.

我希望看到当父对象更改对象时,它会在子对象中更改它.但是,我没想到当孩子改变对象时,它也会改变父对象.然而,stackblitz确实显示了这种行为.我一直以为你需要通过@Output显式地发出一个事件来向父节点发送一个流,然后从子组件中改变它.

解决方法

答案是不”.在您的示例中,传递给@Input属性的值是对对象的引用.如果您有双向绑定,则可以在子组件中为该属性分配一个新对象：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!