angular 模板语法总结

模板语法（模板表达式）  

 一：模板表达式

1.同一标签中 表达式中的上下文变量是由模板定义变量（let等产生)、指令的上下文变量（如果有）和组件的属性叠加而成的。 模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员，模板表达式只能引用表达式上下文中的成员。

 2.一旦开始数据绑定，就不再跟 HTML attribute 打交道了。 这里不是设置 attribute，而是设置 DOM 元素、组件和指令的 property。

HTML attribute 与 DOM property 的对比:
attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
少量 HTML attribute 和 property 之间有着 1:1 的映射，如id。
有些 HTML attribute 没有对应的 property，如colspan。
有些 DOM property 没有对应的 attribute，如textContent。
模板绑定是通过 property 和事件来工作的，而不是 attribute。attribute一旦初始化，就不会被改变，它初始化的是dom的property的值

3.数据绑定的目标是 DOM 中的某些东西。 这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名

4.属性绑定（[属性名])   存在数据绑定  属性就要存在信任（绑的对象为dom的proprty和指令）

    视图元素的属性 (property) 设置为模板表达式时，就要写模板的属性 (property) 绑定     [property]=‘组件属性’

     Angular 会先去看这个属性是否是某个已知指令，如果这个属性是该指令元数据的inputs数组中所列的名字，或者是带有@Input()装饰器的属性。 则属性被映射为指令自己的属性，就存在信任可以数据绑定，如果该属性没有匹配上已知指令或元素的属性（property),就会报错

   在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定，字符串的数据用插值表达式更具有可读性，但是其他的一定要用属性绑定

5.模板语句有副作用

 删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。 这些变更通过系统进行扩散，并最终显示到当前以及其它视图中（不懂，要是有那么好，那等于局部刷新了，是不是在钩子函数里触发更新）

 6.双向绑定

 (input)="currentHero.name=$event.target.value" 第一次见input事件 输入事件

  ngModel输入属性会设置该元素的值，并通过ngModelChange的输出属性来监听元素值的变化（[()]的拆分）

7.模板引用变量(该变量是这个模板的全局变量）

使用井号 (#) 来声明引用变量（引用dom对象）取代了jq ,

指令可以修改这种行为，让这个值引用到别处，比如它自身。 NgForm指令就是这么做的  #heroForm="ngForm" 引用的是ngform指令 #name='ngModule'   heroForm实际上是一个Angular NgForm 指令的引用， 因此具备了跟踪表单中的每个控件的值和有效性的能力,原生的<form>元素没有form属性，但NgForm指令有 heroForm.form.valid

8.输入输出属性 ( @Input 和 @Output )

   数据绑定的右侧为数据绑定的源，左侧是指令或者property   指令必须被输入输出公开声明