@Input 是否提供双向绑定？

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

我做了一个堆栈闪电战 https://stackblitz.com/edit/angular-xjbtis?file=src%2Fapp%2Fapp.component.ts来展示问题。这种情况发生在 Angular 7.0.1 的 stackblitz 中，但在我的本地项目中，它也发生在 Angular 6.1.2 上。

stackblitz 显示了一个具有对象的简单父组件。该对象通过@Input传递给子组件。子组件和父组件都有一个改变对象的函数。它们还都在模板中显示对象的值。

我期望看到当父级更改对象时，它也会在子级中更改它。然而没想到，当孩子改变对象的时候，也为父母改变了。然而，stackblitz 确实显示了这种行为。我一直认为您需要通过 @Output 显式发出一个事件，以向父组件发送一个流，并从子组件那里更改它。

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

this.thing = { name: "world", nbm: 10 };

父组件中相应的属性也会相应更新。事实并非如此，正如您所看到的这次堆栈闪电战 https://stackblitz.com/edit/angular-hmkb6n.

但是，由于父组件和子组件具有对同一对象的引用，因此它们都可以修改其属性之一，并且将在另一个组件中观察到该更改。

为了实现双向绑定，可以添加一个@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>

See 这次堆栈闪电战 https://stackblitz.com/edit/angular-elswfz进行演示。

如果你想阻止子组件修改原始对象，你应该绑定对象属性而不是对象本身：

@Input() thingName: string;
@Input() thingNmb: number;

<child [thingName]="thing.name" [thingNmb]="thing.nmb"></child>