脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular 数据绑定

Angular 2.0+ 的数据绑定的实现示例

 更新时间：2017年08月09日 16:31:00   作者：程序员长春  
本篇文章主要介绍了Angular 2.0+ 的数据绑定的实现实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

这两天学习了Angular感觉 数据绑定这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

前言

我们使用如下的组件代码进行本文的所有演示

export class AppComponent {
 angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg';
 userName="David";
 newItem() {
  console.log("Hello world!");
 }
}

组件到DOM - Component to DOM

属性绑定，单向数据绑定。可以有下面三种不同的书写方式。

 ![]({{ angularLogo }})
 <img [src]="angularLogo">
 ![](angularLogo)
  1. 使用字符串插值方式。 {{ 变量名 }}
  2. 使用方挎号 [] ，方挎号内包含属性名。
  3. 在属性名前添加bind- 也可以达到同样的效果。

DOM到组件 - DOM to Component

事件绑定，当发生特定的DOM事件（例如：click，change，keyup）时，调用组件中指定方法。在下面的示例中，单击按钮时调用该组件的newItem（）方法：

<button (click)="newItem()"></button>

双向数据绑定

使用[(ngModel)]="变量名"方式，可以实现双向数据绑定。

<input type="text" [(ngModel)]="userName">
<h1>Hello {{userName}}!</h1>

从Angular 2.x版开始，Angular中的数据绑定真的只是归结为属性绑定和事件绑定。 双向数据绑定是不存在的东西。 如果没有ngModel指令，我们如何实现双向数据绑定？如下所示：

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

我们来看看这里面发生了什么？

  1. [value]=”username” - 绑定变量username 到input元素的value属性。
  2. (input)=”username = $event.target.value” - 绑定input元素的input事件到js代码username = $event.target.value
  3. $event - 在Angular的事件绑定中暴露的表达式，它的值为事件的载体。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • angularjs中判断ng-repeat是否迭代完的实例

    angularjs中判断ng-repeat是否迭代完的实例

    今天小编就为大家分享一篇angularjs中判断ng-repeat是否迭代完的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angular项目中bootstrap-datetimepicker时间插件的使用示例

    angular项目中bootstrap-datetimepicker时间插件的使用示例

    这篇文章主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈angular.copy() 深拷贝

    浅谈angular.copy() 深拷贝

    本篇文章主要介绍了浅谈angular.copy() 深拷贝，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS模块管理问题的非常规处理方法

    AngularJS模块管理问题的非常规处理方法

    这篇文章主要介绍了AngularJS模块管理问题的非常规处理方法，算是一个无奈之举，分享给小伙伴，大家可以参考下。
    2015-04-04
  • 详解Angular依赖注入

    详解Angular依赖注入

    依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架，在设计应用时经常会用到它，它可以我们的开发效率和模块化程度。&#160;Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。
    2021-05-05
  • angular共享依赖的解决方案分享

    angular共享依赖的解决方案分享

    这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Angular+Node生成随机数的方法

    Angular+Node生成随机数的方法

    这篇文章主要介绍了Angular+Node生成随机数的方法,结合具体实例分析了Angular与Node结合控制前后端实现随机数功能的相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • angular2实现统一的http请求头方法

    angular2实现统一的http请求头方法

    今天小编就为大家分享一篇angular2实现统一的http请求头方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular组件间通信的新解决方案详解

    Angular组件间通信的新解决方案详解

    本文通过对比几种Angular组件间的通信方式,给大家介绍了一种新的Angular组件间通信的解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论