Angular4总结(四)—— 数据绑定,响应式,管道-阿里云开发者社区

开发者社区> luckyharry4> 正文

Angular4总结(四)—— 数据绑定,响应式,管道

简介: 数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
+关注继续查看

数据绑定

angular4中默认的数据绑定都是单向的。可分为:

插值表达式形式(Dom属性绑定)

<p>{{test}}<p>

Dom 属性绑定流程:

  1. 控制器中定义了一个属性,值发生了改变
  2. 对应的dom的value被附上改变了的值
  3. 渲染后的页面上也会出现刚刚的值
  4. 这一切操作都和html属性不发生任何关系

html属性绑定,使用中括号

<img [src]="imgUrl"/>
//如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式
  • 基本Html属性绑定

  • CSS属性绑定

    • 这种形式是全有或者全无的。
    •   < div [class] = "classA classB classC">  </div>
    • A,B样式固定,C随着boolean的true或者false决定是否显示
    •   < div class="classA classB" [class.classC]="一个boolean值"> </div> 
    • 多个属性由不同的boolean控制

      <div [ngClass]="divClass"></div>
      
      <!--divClass 为一个json对象,在控制层可以写为如下:-->
      divClass:{
          classA: true,
          classB: false,
          classC: true
      }
  • 样式绑定

    • style样式全有全无指定

      <div [style.color]="一个boolean值"> </div>
    • 多个属性由不同boolean控制

      <div [ngStyle]="divStyle"></div>
      
      <!--divClass 为一个json对象,在控制层可以写为如下:-->
      divStyle:{
          color: red,
          color-size: 3px
      }

Tips: Dom属性与Html属性的区别

Dom 属性是随着值的变化,会发生改变。而Html属性是在起始的时候你指定的值,以后你拿到的也就一致是这个值。

模版绑定是通过Dom绑定做的,而不是html属性绑定

事件绑定使用小括号

<button (click)="clickEvent($event)">

双向绑定

双向绑定本身其实就是属性绑定和事件绑定的结合,属性绑定是从控制到视图层,而事件绑定是从视图层到控制层

< input [(ngModel)] = "test"> 
<!--test 为控制器的一个参数名称-->

定义element别名

使用#定义别名,在使用的时候不需要加#

< input #testInput (input)=inputEvent(testInput.value)>

响应式编程

在Angular中主要使用rxjs来实现响应式编程。

响应式编程主要其实就是观察者模式的一种延伸,角色可以分为:

  • 可观察对象(Obserable) 表示一组值或者事件的集合
  • 观察者 (Observer)一个回掉函数集合,他知道怎么去监听被Obserable发送的值

万物皆可流处理

管道

管道是将原始值转换为期望格式的一种方法,用 "|" 符号进行分割,主要用于插值表达式。

管道可以像是链式一样,多个管道进行连接

管道常用的可以分为:

  • date 可接受参数,例如 date:'yyyy-MM-dd HH:mm:ss'
  • number 可接受参数,例如:number:'2.2-2'
  • uppercase
  • lowercase
  • async 可处理异步流

管道也可以自己定义,在需要使用的地方,只需要加在declations中即可。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于hive数据导入方式的总结
从本地导入数据到hive: load data local inpath '/home/hive/tb_dw_cu_three_type_list_dtal/*.dat' overwrite into table csap.tb_dw_cu_three_type_list_dtal  partition(statis_date=20160121); 从HDFS直接导入数据到hive:
1967 0
Angular4总结(四)—— 数据绑定,响应式,管道
数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
1204 0
【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据
在做项目的时候,在VidyoCallFlowEntry页面中,通过name字段双击跳转弹出VidyoCallFlow页面,同时传入name的值作为参数进行查询,并展示查询结果。但在路由中获取到name的值,通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值,发现并没有查询到结果,但是根据该name的值在数据库中查询,是有结果的。
1254 0
Python的数据类型总结
下面的表格中列出了已经学习过的数据类型,也是python的核心数据类型之一部分,这些都被称之为内置对象。 对象类型 举例 int/float 123, 3.
673 0
Elasticsearch 跨集群数据迁移方案总结
Elasticsearch 跨集群数据迁移方案总结 -- elasticsearch-dump、reindex、snapshot、logstash
204 0
+关注
luckyharry4
2018年应届大学生,一个IT界小菜鸟。
39
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载