在本文中,我们将学习Angular中的数据绑定。幸运的是,Angular中的数据绑定比.NET简单得多。
数据绑定
在我的工作中,我有机会与许多想要学习Angular的.NET开发人员交流。通常,我已经看到他们带来了他们的.NET技能并努力帮助他们学习Angular。虽然努力和学习的驱动力在那里,但Angular并不是.NET。
由于Angular是一个纯JavaScript框架,因此我将在本系列中简化Angularfor.NET开发人员的基本但重要的概念。
在本文中,我们将学习Angular中的数据绑定。幸运的是,Angular中的数据绑定比.NET简单得多。
首先,让我们修改.NET中的一些数据绑定技术。例如,在ASP.NETMVC中,您使用模型进行数据绑定。视图受到约束:
到一个对象。一个复杂的对象。到一组对象。
实质上,在ASP.NETMVC中,您将数据绑定到模型类。另一方面,在WPF中,您可以使用数据绑定模式。您可以在XAML中设置数据绑定的模式,如下所示:
单向数据绑定。双向数据绑定。一次性数据绑定。单向源数据绑定。
如果您遵循MVVM模式,那么您可能正在使用INotifyPropertyChanged接口来实现双向数据绑定。因此,在.NET世界中有很多方法可以实现数据绑定。
然而,Angular中的数据绑定要简单得多。
如果您对Angular非常陌生,那么让我向您介绍组件。在Angular应用程序中,您在浏览器(或其他地方)中看到的是一个组件。组件由以下部分组成:
TypeScript类,称为组件类。一个称为组件模板的HTML文件。用于组件样式的可选CSS文件。
在Angular中,数据绑定决定了数据在组件类和组件模板之间的流动方式。
Angular为我们提供了三种类型的数据绑定。它们如下:
插值。财产约束。事件绑定。
让我们逐一看一下。
Angular为您提供这三种绑定。在事件绑定中,数据从模板流向类,并且在属性绑定和插值中,数据从类流向模板。
双向数据绑定
Angular没有内置的双向数据绑定,但是,通过组合属性绑定和事件绑定,可以实现双向数据绑定。
Angular为我们提供了一个指令,ngModel实现双向数据绑定,并且它非常易于使用。
作为.NET开发人员,您可能已经意识到Angular中的数据绑定要简单得多,您需要知道的只有四种语法。我希望你发现这篇文章很有用,在后面的文章中,我们将介绍其他Angular主题。