我认为@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>
