(七)数据绑定,响应式编程和管道

(一)数据绑定

未标题-1.jpg

1.数据绑定

未标题-1.jpg

添加一些键盘事件

(kerup.enter)按键并回车
(kerup.space)按键并空格 
(kerup.contro)按键并ctrl 
(kerup.shift)按键并shift
(kerup.alt)按键并alt

(二)DOM属性绑定

<img [src]=''imgUrl''>
<img src = "{{imgUrl}}"

DOM属性和HTML属性。(input)
上面是DOM属性,下面为HTML属性。
html属性表示初始值,(不变)
dom属性表示现在值。(可变)


未标题-1.jpg

三张图说明关系

未标题-1.jpg

未标题-1.jpg

(三)HTML属性绑定

1.基本HTML属性绑定

未标题-1.jpg

2.CSS类绑定


未标题-1.jpg

3.样式绑定


未标题-1.jpg

(四)双向绑定,一般元素加上也没用(input有用)

[(ngModel)] = "name"

(五)管道(可以链试使用)(asyns异步管道先不说)

未标题-1.jpg

未标题-1.jpg

(五)2自定义管道
使用cli工具(注意他有声明但是cli已经替你处理了)
ng g pipe 管道位置和名称
args----参数(可选)
value -----原始值

未标题-1.jpg

(六)响应式编程

1.主模块里引入ReactiveFormsModule

未标题-1.jpg

2.组件模块上添加
import 'rxjs/Rx'
3.申明变量变量类型为FormControl
未标题-1.jpg

4.html上数据绑定
未标题-1.jpg

5.构造函数上订阅事件使数据绑定到另一个变量上

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,833评论 19 139
  • 这本书越看越惊悚,一间神奇的小屋子,如果真的像翔太那样说的话,跟以前的人在通信,这种不正常的世界,绝对是敬而远之的...
    万花谷阅读 1,342评论 0 0
  • 一树樱花压不住 风风雨雨缠绵 香满地 娇红瘦骨 湖水的笑声四溢 正对上不甚开心的云朵 化作泪如注 呓语 左左右人的...
    LonNGer丶阅读 1,769评论 0 0
  • wxg 羡慕是想象中的浪漫 浪漫,嫉妒的根源 恨不能抓住机缘 任时光如此短暂 恨相见太晚 天各一边 此生漫漫 再见...
    silencesky阅读 2,578评论 0 2
  • 星,星的光亮 月,有月的明媚 小院的夜,有夜的妖媚
    实习村姑童小姐阅读 1,472评论 0 0

友情链接更多精彩内容