Angular2模板语法总结

1、模板语法1、插值表达式（{{...}}）如：{{data.title}}2、模板表达式（[property]="expression")模板表达式产生一个值。禁止在JavaScript中使用具有或可能导致副作用的表达式，包括：赋值(=,+=,-=,...)new运算符使用;or,链式表达式自增自减操作符号：++和--3、模板语句((event)="statement")模板语句用于响应绑定目标（如HTML元素、组件或说明）。如：删除4.双向数据绑定（[(...)]）1.绑定语法：概述Angular提供了多种数据绑定，本章将对其进行讨论。让我们从高层次的角度看一下Angular数据绑定及其语法。绑定的类型按照数据流向可以分为三类：从数据源到视图，从视图到数据源，以及从视图到数据源再到视图的双向绑定。二、绑定的目标数据绑定的目标是DOM中的东西。这个目标可能是一个属性（元素|组件|指令），一个事件（元素|组件|指令），或（很少）属性名称。下面是汇总表：3.Attribute、class和style绑定属性bindingattribute和property可以翻译成attribute。但是上面说的属性绑定是Property绑定，这里是属性绑定。Property——attribute属性——特性简单理解：Attribute是DOM节点自带的属性，比如html中常用的id、class、title、align等。Property是作为对象的DOM元素，及其附加的内容，比如childNodes，firstChild。注意：常用的Attributes，如id、class、title等，已经作为Properties附加到DOM对象上，可以像Properties一样被赋值和赋值。但是自定义的Attribute，不会有这样的特殊处理。因此，当一个元素没有要绑定的属性时，就必须使用属性绑定。考虑ARIA、SVG和表格中的colspan/rowspan等属性。它们是纯属性，没有对应的绑定属性。如果我们试图写这样的东西，现状会让我们很痛苦：Three-Four会得到这个错误：Templateparseerrors:Can'tbindto'colspan'因为它不是一个已知的原生属性（模板解析错误：不能绑定到'colspan'因为它不是一个已知的原生属性）正如提示所说，元素有没有colspan属性。它只有colspan特性，但是插值表达式和属性绑定只能设置属性，不能设置属性。CSS绑定使用CSS类绑定，可以在元素的类属性中添加和删除CSS类名。CSS类绑定的语法类似于属性绑定。但是方括号中的部分不是元素的属性名，而是由类前缀、一个点（.）和CSS类名组成，其中最后两部分是可选的。如：[class.class-name]。1.[style.propertyName]，如：CSS绑定方法1