Angular 5.x 学习笔记（12）——Angular5.x
Angular5.X基本语法
（1） *ngFor
<ul>
<li *ngFor="let hero of heroes">
{{ hero.name }}
</li>
</ul>
（2） *ngIf
<p *ngIf="heroes.length > 3">There are many heroes!</p>
(3) 插值表达式 {{ }}
<p>My current hero is {{currentHero.name}}</p>
<h3>
{{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
<p>The sum of 1 + 1 is {{1 + 1}}</p>
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
数据绑定
（1）单向绑定： 从数据源到视图目标。
一般用于插值表达式 Property Attribute 类 样式
{{expression}}
[target]="expression"
bind-target="expression"
（2）单项绑定： 从视图目标到数据源
一般用在事件
(target)="statement"
on-target="statement"
（3） 双向绑定： 通常用在 <input> 元素
[(target)]="expression"
bindon-target="expression"
说明: data -> view : {{ }} 或 [ ]
view -> data: (click)
双向绑定，自然是 [( )], 常用的有 [( ngModal)]
HTML attribute 与 DOM property 的对比
https://angular.cn/guide/template-syntax
模板绑定是通过 property 和事件来工作的，而不是 attribute。在 Angular 的世界中，attribute 唯一作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。
把这个思维模型牢牢的印在脑子里，接下来，学习什么是绑定目标。
数据绑定的目标是 DOM 中的某些东西。 这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。
下面是汇总表：
（1）绑定元素的 property、 组件的 property、 指令的 property
<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
（2）绑定 元素的事件、 组件的事件、 指令的事件
<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
（3） 双向绑定 事件与 property
<input [(ngModel)]="name">
（4） 绑定attribute（例外情况）
<button [attr.aria-label]="help">help</button>
（5） 绑定 class property
<div [class.special]="isSpecial">Special</div>
（6） 绑定style property
<button [style.color]="isSpecial ? 'red' : 'green'">
属性绑定
（1） 绑定image 元素的src属性到组件的heroImageUrl属性值（heroImageUrl就是对应类的一个成员变量）
<img [src]="heroImageUrl">
说明： image 元素属性是自有的，既然是属性，就是它自由的，只需给它的属性赋值即可。 比如： src 是 image 的属性之一。 不能给它没有属性赋值
(2) 绑定按钮的disable属性
<button [disabled]="isUnchanged">Cancel is disabled</button>
(3) 设置指令的属性
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
(4) 设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）
<app-hero-detail [hero]="currentHero"></app-hero-detail>
特别注意：可不要忘了中括号 ，
这行代码是错的： <app-hero-detail hero="currentHero"></app-hero-detail>
如何在插值表达式和属性绑定之间做出选择？
在多数情况下，插值表达式更为方便。 实际上，在渲染视图之前，Angular 把这些插值表达式编译成相应的属性绑定。
当要渲染的数据类型是字符串时，用哪种方式都一样。从可读性角度看，倾向于插值表达式，它的可读性强；
当数据类型不是字符串时，就必须使用属性绑定了。
内置属性型指令
（1） 属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。
（2）很多Angular模块，比如RouterModule和FormsModule都定义了自己的属性型指令。 本节将会介绍几个最常用的属性型指令：
ngClass - 添加或移除一组CSS类
ngStyle - 添加或移除一组CSS样式
ngModel - 双向绑定到HTML表单元素
说明： ngModel 应用于双向数据绑定，[(ngModel)]， 常用于 HTML 表单元素上。
