时间戳

首页 > 解决方案 > 学习概念化数据绑定

angular - 学习概念化数据绑定

问题描述

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

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

DOM 和组件（左，右）之间的这些线让我感到困惑。{{value}} 从 Component 到 DOM 是什么意思？当箭头从 DOM 指向中间有 (event) = "handler" 的组件时，这是什么意思？

我认为数据绑定意味着将数据从 .html 中的视图绑定到相应 .ts 中的控制器，反之亦然。DOM 在哪里，我的理解从哪里开始出错？

标签： angulardomdata-binding

解决方案

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

DOM 位于浏览器中，它构建了页面的实际表示以供用户查看。

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

testString: string = 'here is some text';

现在可以在视图的 HTML 中访问它：

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

但它也可以用于输入、单选按钮、选择等，当用户输入一个值时，控制器中的变量会假定该值：

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

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

您链接的文档的该部分的引用很好地解释了它：

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

希望有帮助。

推荐阅读