模板语法学习

学习angular2组件里的模板html语法相关内容，做了一些总结

参照https://www.angular.cn/guide/template-syntax#binding-syntax-an-overview

一、通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。

二、模板表达式

angular对该表达式求值转化为字符串。表达式的上下文可以是：模板输入变量（let a）、模板引用变量（#）、和组件成员

三、模板语句

(click)="add(a)"，用于事件绑定。上下文通常是组件的方法，不过变量a可以是模板输入变量和模板引用变量

四、语法绑定概览

绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

模板绑定是通过DOM property 和事件来工作的，而不是HTML attribute，在angular的数据绑定中，永远只考虑dom的property（除了某些特例，在没有property可绑定时，使用attribute绑定:[arr.attribute]，原因在于property和attribute不一定是对应的）：

attribute 初始化 DOM property，然后它们的任务就完成了。property 的值可以改变；attribute 的值不能改变。例如，当浏览器渲染 <input type="text" value="Bob"> 时，它将创建相应 DOM 节点， 它的 value 这个 property 被初始化为 “Bob”。当用户在输入框中输入 “Sally” 时，DOM 元素的 value 这个 property 变成了 “Sally”。 但是该 HTML 的 value 这个 attribute 保持不变。如果你读取 input 元素的 attribute，就会发现确实没变： input.getAttribute('value') // 返回 "Bob"。

绑定目标：强烈建议看官方文档的介绍：组件与模板-模板语法

绑定按绑定目标分类：属性（property）绑定、attribute绑定、css绑定、style绑定、事件绑定、双向数据绑定、

五、内置指令

分为属性指令和结构型指令

常用内置属性指令：NgClass、NgStyle、NgModel，主要是改变属性

常见内置结构型指令：NgForOf、NgIf，主要是改变dom的结构

六、输入输出属性 满足组件之间的调用

@Input 一个组件想要绑定另一个组建的属性，属性一定要是定义为input

@Output 一般用于组件之间的事件传递绑定EventEmitter

是输入还是输出从数据的流向考虑就行，属性就是输入的，事件是传出所以是输出

七、模板表达式操作符

|和?