Angular - 为什么使用 2 向绑定而不是 1 向绑定并直接修改父 Input()？
Angular - Why use 2-way binding instead of 1-way and modifying parent Input() directly?
我是 Angular 的新手，希望有人能对此有所启发。
方法 1： 假设我使用一种数据绑定将父对象 'x' 传递给子组件：
<app-child [x]="x"></app-child>
我的子组件在 ts:
中像这样修改它
Input() x;
然后：
this.x.someProperty = 'some new value';
这似乎工作正常，我在父级中的 'x' 对象已更新。
但是在 Angular 教程和其他示例（例如 ）中，似乎 'proper' 的方法是
方法 2： 使用 2 方式绑定，例如：
<app-child [(x)]="x"></app-child>
并在 ts
@Input() x: any;
@Output() xChange = new EventEmitter<any>();
然后：
this.x.someProperty = 'some new value';
this.xChange.emit(x);
我目前非常愉快地使用 Angular 7 中的方法 1，没有任何问题 - 谁能解释为什么（如果有的话）我应该改用方法 2？由于方法 1 有效，它似乎更复杂且不必要。
您正在使用 object，并且 object 是通过引用传递的，并且是 mutable。
如果您要使用原始值，如 boolean，它在您提供的 link 中使用，那么修改 child 中的变量将 不体现在parent。你可以在 demo 中看到它，我们在其中使用了一个字符串，它也是一个基本类型。为了实现 parent 也将获得该值，您需要使用 Output。选择使用 two-way-bindning 即
[(something)]="something"
要不要，由你决定。您也可以同时使用 one-way-binding，例如：
[something]="something" (somethingHasChanged)="parentFunction($event)"
所以 two-way-binding 只是上面的 shorthand。
因此，如前所述，objects（和数组）是可变的，因此请务必记住，如果您有时不想在 parent 中反映您在 child组件。
实际上这是一个很好的问题，我也找不到任何官方解释为什么我们不应该改变 @input 值，不像 reactJs 和 vueJs，他们正式劝阻我们改变 props.
除了像@AJT82 所说的那样，无法通过您的方法 1 更改原始值。这是原因之一。我想另一个原因是，改变子组件的 @input 值是不好的做法，它使代码更容易出错且难以调试，它也打开了允许所有子组件任意更新对象的机会让我们很难追踪变化。
所以这更多是基于良好的开发实践原因，我们应该使用 @output 来更新我们的父对象。
我是 Angular 的新手，希望有人能对此有所启发。
方法 1： 假设我使用一种数据绑定将父对象 'x' 传递给子组件：
<app-child [x]="x"></app-child>
我的子组件在 ts:
中像这样修改它Input() x;
然后：
this.x.someProperty = 'some new value';
这似乎工作正常，我在父级中的 'x' 对象已更新。
但是在 Angular 教程和其他示例（例如
<app-child [(x)]="x"></app-child>
并在 ts
@Input() x: any;
@Output() xChange = new EventEmitter<any>();
然后：
this.x.someProperty = 'some new value';
this.xChange.emit(x);
我目前非常愉快地使用 Angular 7 中的方法 1，没有任何问题 - 谁能解释为什么（如果有的话）我应该改用方法 2？由于方法 1 有效，它似乎更复杂且不必要。
您正在使用 object，并且 object 是通过引用传递的，并且是 mutable。
如果您要使用原始值，如 boolean，它在您提供的 link 中使用，那么修改 child 中的变量将 不体现在parent。你可以在 demo 中看到它，我们在其中使用了一个字符串，它也是一个基本类型。为了实现 parent 也将获得该值，您需要使用 Output。选择使用 two-way-bindning 即
[(something)]="something"
要不要，由你决定。您也可以同时使用 one-way-binding，例如：
[something]="something" (somethingHasChanged)="parentFunction($event)"
所以 two-way-binding 只是上面的 shorthand。
因此，如前所述，objects（和数组）是可变的，因此请务必记住，如果您有时不想在 parent 中反映您在 child组件。
实际上这是一个很好的问题，我也找不到任何官方解释为什么我们不应该改变 @input 值，不像 reactJs 和 vueJs，他们正式劝阻我们改变 props.
除了像@AJT82 所说的那样，无法通过您的方法 1 更改原始值。这是原因之一。我想另一个原因是，改变子组件的 @input 值是不好的做法，它使代码更容易出错且难以调试，它也打开了允许所有子组件任意更新对象的机会让我们很难追踪变化。
所以这更多是基于良好的开发实践原因，我们应该使用 @output 来更新我们的父对象。