模板语法学习

学习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

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

七、模板表达式操作符

|和?

猜你喜欢

转载自www.cnblogs.com/hahlzj/p/11159720.html