Angular2 的属性绑定

前言

当要把视图元素的属性 (property) 设置为模板表达式时,就要写模板的属性 (property) 绑定

Angular的属性绑定是单向数据绑定,因为值的流动是单向的,从组件的数据属性流动到目标元素的属性。
    对于属性绑定,强调以下几点:

  • 不可以使用属性绑定来从目标元素拉取值
  • 不可以从绑定目标元素的属性来读取它
  • 不可以使用元素绑定来调用目标元素上的方法
  • 你只可以设置属性绑定.

如果这个元素触发了事件,可以通过事件绑定来监听它们。
    如果必须读取目标元素上的属性或调用它的某个方法,得用另一种技术。 参见 API 参考手册中的 ViewChild和 ContentChild

属性绑定的方式

  1. 使用[]进行绑定
  2. 使用bind-进行绑定

以绑定DOM属性到组件为例:

目标属性被[]包裹着。
        组件属性被""包裹着。
现在你只需要知道:

<img [src]="heroImageUrl">

等同于

<img bind-src="heroImageUrl">

属性绑定的用法

用法1:
        绑定DOM属性到组件
        语法:
            <htmlElement [DOM属性]=‘组件的属性‘> </htmlElement>
        举例:

<img [src]="heroImageUrl">

在这个例子中image 元素的src属性会被绑定到组件的heroImageUrl属性上。

用法2:
        绑定指令属性到组件
        语法:
            <htmlElement [指令属性]=‘组件的属性‘> </htmlElement>
        举例:

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

Angular 会先去看这个名字是否是某个已知指令的属性名,然再去看是否为DOM属性

严格来说,Angular 正在匹配指令的输入属性的名字。 这个名字是指令的inputs数组中所列的名字,或者是带有@Input()装饰器的属性。 这些输入属性被映射为指令自己的属性。
             在这个例子中,ngClass指令属性会被绑定到组件的class`属性上

注意:
        如果名字没有匹配上已知指令或元素的属性,Angular 就会报告“未知指令”的错误。

用法3:
        绑定自定义组件的模型属性
        语法:
            <user-defined-tag [指令属性]=‘组件的属性‘> </user-defined-tag>
        举例:

<hero-detail [hero]="currentHero"></hero-detail>

用法4:
        属性绑定和插值表达式
        很多情况下,使用插值表达式属性绑定的效果相同:

<img src="{{heroImageUrl}}"> 

等效于

<img [src]="heroImageUrl">

但是这种情况仅仅存在于数据类型是字符串时,如果是其他数据类型,就必须使用属性绑定了。

attribute绑定(特性绑定)

attributeproperty都可以翻译成属性。但是前面所说的属性绑定是Property binding,而这里说的是ttribute绑定

小红书对这两个单词有不同的翻译,用以区别不同:

Property——属性
        attribute——特性

简单的理解:

Attribute就是DOM节点自带的属性,例如html中常用的id、class、title、align.

Property是这个DOM元素作为对象,其附加的内容, 例如childNodes、firstChild.

注意:
        常用的Attribute,例如id、class、title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待。

因此,当元素没有属性可绑的时候,就必须使用 attribute 绑定。
    考虑 ARIA, SVG 和 table 中的 colspan/rowspan 等 attribute。它们是纯粹的 attribute,没有对应的属性可供绑定。

如果想写出类似下面这样的东西,现状会令我们痛苦:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

会得到这个错误:

Template parse errors:
Can‘t bind to ‘colspan‘ since it isn‘t a known native property
(模板解析错误:不能绑定到 ‘colspan‘,因为它不是已知的原生属性)

正如提示中所说,元素没有colspan属性。它只有colspan特性,但是插值表达式和属性绑定只能设置属性,并不能设置特性attribute。

attribute 绑定

我们需要attribute 绑定来创建和绑定到这样的 attribute。

attribute 绑定的语法与属性绑定类似。
    但方括号中的部分不是元素的属性名,而是由attr前缀,一个点 (.) 和attribute 名字组成。 可以通过值为字符串表达式来设置 attribute 的值。

这里把[attr.colspan]绑定到一个计算值:

<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

这里是表格渲染出来的样子:

attribute 绑定的主要用例之一是设置 ARIA attribute(译注:ARIA指可访问性,用于给残障人士访问互联网提供便利), 就像这个例子中一样:

<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

仅供学习。


原文地址:https://www.cnblogs.com/suzhen-2012/p/11258498.html

时间: 2024-11-09 00:49:38

Angular2 的属性绑定的相关文章

SpreadJS 在 Angular2 中支持绑定哪些属性?

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .NET.Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发. 在上一篇文章中,我们了解到 SpreadJS 已经全面支持了 Angular2,并且只需4步就能完成在 Angular2 中集成 SpreadJS. 下面我们来介绍 SpreadJS 在 Angular2 中支持绑定哪些属

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTML标签内(是在一个标签的"<"和">"中使用)直接使用handlebars表达式.可以直接用handlebars表达式的值作为HTML标签中某个属性的值. 准备工作:ember generate route binding-element-attributes 1,绑定字符串 <!-- //  app/templates/b

【WPF】如何把一个枚举属性绑定到多个RadioButton

一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和UnChecked都会触发绑定,这样就会调多次的Set. 二.目的 实现一个枚举属性绑定到多个RadioButton, 属性的Set方法不会被触发多次. 三.实现 方法大家都知道,就是利用Converter和ConevertParamter属性. 因为多个控件绑定一个属性,Checked和UnChe

使用注解属性绑定

大家应该知道在Spring中有一个注解@Value,他可以帮助我们来讲Spring加载的配置文件(*.perperties)文件中的信息自动的注入到我们的非静态属性中的. 一般情况下我们会这样使用: 1. 首先在Spring的配置文件中加载属性文件: ? 1 <context:property-placeholder location="classpath:component.properties"  ignore-unresolvable="true"/&g

qml中的属性绑定与赋值

浅谈qml属性绑定与赋值 属性赋值 就字面意思,赋一个值给属性 Rectangle { id:rect Component.onCompeleted:{ rect.width = 10; // 赋值 rect.height = 10; // 赋值 rect.color = "red"; // 赋值 } } 属性赋值时会发出信号,可以通过信号处理器,来为信号添加处理函数,关于信号处理器,也就是连接到同一个信号的槽函数的队列,每次为信号处理器书写处理函数时,并不会覆盖上一次书写的处理器,最

Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2   3 <table> 4      <thead> 5          <tr><th>First nam

C# 属性绑定

C#的反射明显的比AS3的反射要强很多啊.可以从外部访问到类的私有成员.举个例子:                 Type _class = this.GetType();                 FieldInfo _field = _class.GetField(@fieldName, BindingFlags.Instance | BindingFlags.NonPublic); 枚举 : BindingFlags.NonPublic ->非公共成员将包括在内进行搜索,意思就是p

xaml mvvm(2)之属性绑定

通过微软INotifyPropertyChanged接口,可以实现对UI实时更新,不管是数据源或者目标对象,可以实现相互通知. 下面我们根据INotifyPropertyChanged编写一个扩展类.该类是基于C#5.0特性,这里我们介绍一下System.Runtime.CompilerServices命名空间下的CallerMemberName特性,当RaisePropertyChanged的属性名称参数为空,而通过编译器可以智能加上,可以通过反编译工具知晓,这点改进这点很人性化.注:如果开发