angular 组件与模板
2018-05-30 本文已影响0人
H_DaYan
简化理解官网内容
官网链接：angular 组件与模板
1. 插值表达式 {{ ... }}
Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
- 不支持赋值 (=, +=, -=, ...)
- 不支持new 运算符
- 不支持使用 ; 或 , 的链式表达式
- 不支持自增和自减运算符：++ 和 --
- 不支持位运算
|和& - 具有新的模板表达式运算符，比如
|、?.和!
2. 表达式上下文
\\模板输入变量hero和模板引用变量#heroInput
<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}
表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）（这是什么？？？？）和组件的成员叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中，那么被引用的顺序依次是，模板变量，指令的上下文变量，组件的成员。
模板表达式不能引用全局命名空间中的任何东西，比如 window 或 document。它们也不能调用 console.log 或 Math.max。
3. 模板语句
(event)="statement", 例如
<button (click)="deleteHero()">Delete hero</button>
模板的 $event 对象、模板输入变量(let hero)和模板引用变量(#heroForm)传给了组件中的一个事件处理器方法
(模板上下文中的变量名的优先级高于组件上下文中的变量名)
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
{{hero.name}}
</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
以下不允许
-
new运算符 - 自增和自减运算符：
++和-- - 操作并赋值，例如
+=和-= - 位操作符
|和& - 模板表达式运算符，比如
|、?.和!
模板绑定是通过 property 和事件来工作的，而不是 attribute
HTML attribute 与 DOM property 的对比
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"。
disabled 这个 attribute 是另一种特例。
按钮的 disabled 这个 property 是 false，因为默认情况下按钮是可用的。
当你添加 disabled 这个 attribute 时，
只要它出现了按钮的 disabled 这个 property 就初始化为 true，于是按钮就被禁用了。
添加或删除 disabled 这个 attribute 会禁用或启用这个按钮。
但 attribute 的值无关紧要，
这就是你为什么没法通过 <button disabled="false">仍被禁用</button> 这种写法来启用按钮。
设置按钮的 disabled 这个 property（如，通过 Angular 绑定）
可以禁用或启用这个按钮。 这就是 property 的价值。
