Question

我正在学习Angular，特别是关于数据绑定的事情。

https://angular.io/guide/architecture-components在页面中间显示了可视化内容，显示了DOM和组件之间的定向数据流。

这些在DOM和组件（左，右）之间的线使我感到困惑。当{{value}}从Component转到DOM时是什么意思？当箭头从DOM正确指向组件之间的（event）=“ handler”时，是什么意思？

我认为数据绑定是指将.html中的视图中的数据绑定到相应的.ts中的控制器，反之亦然。 DOM在哪里，我的理解在哪里开始出现问题？

Answer 1

这是2种方式进行数据绑定的示例，您最初对它如何工作的想法是正确的。

DOM在浏览器中，它是构建页面实际表示形式以供用户查看的

在组件中创建变量时，该变量可在DOM中使用：

testString: string = 'here is some text';

现在可以在视图的HTML中对其进行访问：

<span>{{ testString }}</span>

但是它也可以用在输入，单选按钮，选择等中，并且当用户输入一个值时，控制器中的变量将采用该值：

<input type='text' [(ngModel)]='testString'>

现在，当页面加载时，“这里有一些文本”将出现在输入中，但是用户键入的任何其他文本将替换该文本，并成为存储在testString中的值。如果将onChange方法添加到暗示控制台已记录this.testString的输入中，则会看到它始终与输入中的值匹配。

您链接的文档中该部分的引言很好地解释了这一点：

在双向绑定中，数据属性值与属性绑定一样从组件流到输入框。与事件绑定一样，用户所做的更改也将流回到组件，将属性重置为最新值。

希望有帮助。