数据绑定

Angular有四种数据绑定形式:

    <div>
        <div>{{hero.name}}</div>                                 //第一种

        <hero-detail [hero]="selectedHero"></hero-detail>        //第二种

        <input type="text"  [(ngModel)]="username" />             //第三种

        <input type="password" [(ngModel)]="password" />        //第三种

        <button (click)="onClick()">Login</button>               //第四种
    </div>

第一种:显示组件的hero.name属性的值。
第二种:属性绑定把负组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
第三种:它使用ngModel指令组合了属性绑定和事件绑定的功能。 ** [(ngModel)]="username" 这个看起来很别扭,稍微解释一下,方括号 [ ] 的作用是说把等号后面当成表达式来解析而不是当成字符串,如果我们去掉方括号那就等于说是直接给这个ngModel赋值成“username”这个字符串了。 方括号的含义是单向绑定**,就是说我们在组件中给model赋的值会设置到HTML的input控件中。
这里粗略的了解一下,日后深入。
第四种:事件绑定在用户点击它的时候调用组件的onClick方法。


<h6 align = "right">sivona</h6>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 NG的核心部分之一就是数据绑定。它们是内嵌在HTML里面的表达式,用来在HTML文档里产生动态内容。 举个例...
    云峰yf阅读 3,663评论 0 2
  • 前言 我们使用如下的组件代码进行文本的所有演示 export class AppComent{angularLog...
    心安1226阅读 273评论 0 1
  • 数据绑定为应用程序提供了一种简单一致的机制,来管理与协调数据的显示,以及数据值的变化。angular提供了多种数据...
    oWSQo阅读 742评论 0 1
  • 本系列文集:来扯点ionic3 相关章节:来扯点ionic3[5] 轻松上手表单:这些组件可以玩一年 当我们有了一...
    忠叔阅读 3,509评论 3 7
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139