Angular - 两种方式绑定答案

【问题标题】：Angular - Two Way BindingAngular - 两种方式绑定
【发布时间】：2020-05-04 01:40:03
【问题描述】：

我是 Angular 的初学者，我介绍了两种方式绑定，但由于某种原因，我不明白我在下面做错了什么，任何输入都将不胜感激。

我只是想理解这个概念，所以下面的代码相当简单。据我了解

将双向绑定 [()] 添加到 <app-child-comp> 我将父字段“名称”从父组件传递到父视图，并使用属性绑定为子组件提供初始化值（默认值）接收@Input 字段中的值。
一旦“@Input childName”字段使用正常插值获得其值，我就可以在子模板中随意使用该值。
现在，通过定义一个 EventEmitter，然后使用它的 .emit 方法，我应该能够将变量上的任何更改传递回父组件并更新 DOM 属性以反映更改。

问题：

现在这是我的问题，父->子方向绑定按预期工作，正如我所期望的那样，名称“Fin”出现在父模板的输入和子模板的插值中，但是当我想更改子模板中的名称并让它冒泡回到父属性时，它失败了尽管它更新了子模板中的插值，但更新。

我已经尝试解决这个问题一段时间了，我正在研究的所有内容都表明我做对了，但如果你能解释一下我做错了什么，我将不胜感激。

【问题讨论】：

【解决方案1】：

我添加这个是为了让未来的任何人都可以从我的错误中吸取教训。

给定子组件有两种方法来执行事件绑定

第一种方法是显式声明属性和事件绑定，如下<app-child-comp [childName]="name" (childNameChange)="name =$event"></app-child-comp>
第二种方式是使用“香蕉盒”方法，子标签转换为<app-child-comp [(childName)]="name"></app-child-comp>

我尝试使用第二种方法，但不清楚的是，当涉及到子组件中需要遵循的字段名称时，有一个命名约定让“香蕉法”发挥作用

规则：如果您的@Input 字段被命名为“x”，那么您的@Output EventEmitter 需要命名为“xChange”，“Change”是名称的第二部分。 p>

语法：输入名称+更改

所以为了解决我的问题，我需要从

更改命名约定

@Input() childName:string;
@Output() changedName = new EventEmitter<string>();

到

@Input() childName:string;
@Output() childNameChange = new EventEmitter<string>();

【讨论】：

【解决方案2】：

您必须在根组件中添加输出：

<app-child-app [(childName)]="name" (changedName)="name = $event"></app-child-app>

【讨论】：