Angular4学习笔记——数据绑定

MRZYD 发布于2019-08-21 17:48 / 1324人阅读

摘要：所以，在的世界中，唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的和事件打交道，而就基本上靠边站了，只有比较特殊的情况才会用到他。事件绑定事件名事件绑定分为对原生事件绑定和自定义事件绑定。

数据绑定总体而言有三种类型：

{{...}} 插值表达式绑定

属性绑定（包括property和attitude

事件绑定

插值表达式绑定

既可以写在html结构中，也可以写在标签中

My current hero is {{currentHero.name}}

属性绑定：[属性名]

// 元素属性设置为组件属性的值,image 元素的src属性会被绑定到组件的heroImageUrl属性上

// 设定自定义组件的模型属性（这是父子组件之间通讯的重要途径）

注意别忘了[]，忘记了[]，则相应属性就被绑定到了字符串上，而不是背后所代表的值。
有时候也可以通过插值表达式实现一样的效果

Attribute绑定

当元素没有属性（native property)可绑的时候，就必须使用 attribute 绑定，例如元素没有colspan属性,但是插值表达式和属性绑定只能设置属性，不能设置 attribute，这时我们便需要使用到attribute绑定来替我们解决这个问题。
如果对property和attribute有所疑惑，可通过下面的文字先做一个区分梳理：
attribute初始化DOM property，然后它们的任务就完成了，property的值可以改变；attribute 的值不能改变。
例如，当浏览器渲染时，它将创建相应DOM 节点，其value property被初始化为“abc”。当用户在输入框中输入“abcwwww”时，DOM元素的value property变成了“abcwwww”。但是这个HTML value attribute保持不变。如果我们读input元素的attribute，就会发现确实没变：input.getAttribute("value") // 返回 "abc"。

所以，在Angular的世界中，attribute唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的property和事件打交道，而attribute就基本上靠边站了，只有比较特殊的情况才会用到他。

具体绑定格式如下：

 One-Two

Class绑定和Style绑定

借助 CSS 类绑定，可以从元素的class attribute 上添加和移除 CSS 类名。

// 替换型绑定：即当 badCurly 有值时class的值会被完全替换成一个badCurly.
Bad curly
// 增减类绑定：绑定到特定的类名
The class binding is special

如果要同时替换多个class，使用ngClass指令绑定到一个对象上是更好的选择：通过修改currentClasses的值可以同时修改1/n个class.

xxxx

通过样式绑定，可以设置内联样式，样式属性命名方法可以用中线命名法，也可以用驼峰式命名法，如fontSize。


// 单位也写在方括号里，这个很方便啊

同样也可以通过ngStyle指令把内联样式绑定到一个对象上。

xxxx

事件绑定：(事件名)

事件绑定分为对原生DOM事件绑定和自定义事件绑定。原生事件可以通过$event访问事件对象，它有像target和target.value这样的属性。

// 事件绑定监听按钮的点击事件。每当点击发生时，都会调用组件的onSave()方法。

// 当input值发生改变时，自动更新currentHero.name的值

自定义事件和Vue的处理方法很相像。

// （子）组件定义了deleteRequest属性，它是EventEmitter实例
deleteRequest = new EventEmitter();
// 当触发delete事件时，指令调用EventEmitter.emit(payload)来触发事件
delete() {
  this.deleteRequest.emit(this.hero);
}
// (父）组件监听到了deleteRequest事件就调用deleteHero方法，并通过$event对象来访问载荷this.hero

双向数据绑定： [(...)]

双向绑定实质上是属性绑定和事件绑定的语法糖。

// 在没有双向绑定之前可能需要这样写

// 但有了双向绑定之后，只需要这样就行了

父子组件之间可以通过EventEmitter来进行操作，原生html元素就需要依赖自身的值变化事件了，但即使可以操作这样写也不够优雅，所幸我们可以通过[(ngModel)]指令来完成。值得注意的是，这种指令也只是针对表单元素，对于组件还是需要使用前文提及的双向绑定语法。
还有一点是，表单元素使用过程会需要一些注意的地方，还请查看表单相关文档/稍后写的文章，下面代码仅作为语法示例。

文章先写到这吧，还有一些其他的工具和数据绑定关系不算特别大就放在其他笔记中啦~~

前端新人，写的不对的地方还请指出；如果觉得对你有帮助，可以点个赞鼓励一下我哦！~~

混合云 idc机房托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90029.html

Angular4学习笔记之HTML属性绑定

摘要：第二种情况控制样式如果的值为那么样式就是，否则就是写在最后对于的属性绑定和的属性绑定是一样一样的。对于文章中所用的代码是结合了学习笔记之数据绑定上面的例子做的，链接地址简介基本HTML属性 Css 类绑定 CSS 类绑定，[class] 全部替换的例子 CSS 类绑定，[class.sepcial] 部分替换的例子 CSS 类绑定，[ngClass] 替换多个的...

wawor4827 2019-08-21 18:36 评论0 收藏0
Angular4学习笔记之DOM属性绑定

摘要：如果没有，请查看学习笔记之安装和使用教程事件绑定准备工作了解目的在模版的界面上面增加一个按钮，然后通过小括号绑定一个事件。简介使用插值表达式将一个表达式的值显示在模版上 {{productTitle}} 使用方括号将HTML标签的一个属性值绑定到一个表达式上使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上按钮绑定事件注意在开始下面的例子之前，请先确认已...

Genng 2019-08-21 18:34 评论0 收藏0
Angular4学习笔记——组件之间的交互

摘要：具体思路子组件暴露一个属性，当事件发生时，子组件利用该属性向上弹射事件。父组件绑定到这个事件属性，并在事件发生时作出回应。这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子组件通过各自的构造函数注入该服务。通过输入型绑定把数据从父组件传到子组件 Angular对于父组件 => 子组件的数据通信做法和Vue很相似。 // 父组件html模板 // 子组件接收数据 i...

Guakin_Huang 2019-08-21 17:48 评论0 收藏0
Angular4学习笔记——生命周期钩子

摘要：所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，会找到并调用像这样的钩子方法，有没有接口无所谓。当使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法用处当设置数据绑定输入属性发生变化时响应。接口和钩子在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。在这里主要使用的是类接口及其实现： interf...

fizz 2019-08-21 17:48 评论0 收藏0
angular4学习记录 -- 数据绑定、响应式编程、管道

摘要：我们通过装饰器告诉这是一个管道。这个装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。非纯管道速度超慢，深度检测，会频繁检测。 angular4 数据绑定、响应式编程、管道数据绑定基本Html属性绑定 Something css类绑定 something something something 样式绑定

Alliot 2019-08-21 16:45 评论0 收藏0