自学ng2 -绑定语法
单向 --从数据到视图
<img src="{{ expression }}" />,[ src ]="expression",bind-src="expression"
单向 --从视图到数据
( target )="statement",on-target="statement"
双向 --
[( target )]="expression",bindon-target="expression"
attribute和property
(attribute 是由 HTML 定义。property 是由 DOM 定义。attribute值不可变,property值可变)
(HTML attribute value
指定了初始值;DOM value
property 是当前值。)
(模板绑定是通过 property 和事件来工作的,而不是 attribute。)
绑定目标 --(元素 | 组件 | 指令的)property、event,attribute 名
各种绑定类型 --
<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
<app-hero-detail [hero]="currentHero"></app-hero-detail> (父子组件通讯重要途径)
子:
--deleteRequest = new EventEmitter<Hero>();
--delete(){
this.deleteRequest.emit(this.hero);
}
父:
--<parent (deleteRequest)="deleteHero($event)" [hero]="currentHero"></parent>
双向绑定分解:
<app [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app>
-- 原生html不支持x、xchange模式,可用NgModel指令来绑定
NgClass
- 添加或移除一组CSS类
NgStyle
- 添加或移除一组CSS样式
NgModel
- 双向绑定到HTML表单元素
内置结构型指令
*ngIf - 根据条件把一个元素添加到DOM中或从DOM移除
*ngSwitch - 一组指令,用于切换一组视图
<div [ngSwitch]="currentHero.emotion">
<app-happy *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy>
<app-sad *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad>
<app-confused *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused>
<app-unknown *ngSwitchDefault [hero]="currentHero"></app-unknown>
</div>
*ngFor - 对列表中的每个条目重复套用同一个模板 (let a of b; let i=index; trackBy:
trackByHeroes)
-- trackByHeroes(index: number, hero: Hero): number{ return hero.id }
-- trackBy 避免对未改变Dom重复操作
模板引用变量
-- 类似vue2的 $ref
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
输入输出属性(@Input、@Output)
所有组件皆为指令
绑定的目标是在=
左侧的部分, 源则是在=
右侧的部分。
目标属性必须被显式的标记为输入或输出。
<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
输入属性 输出属性
@Input() hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();
@Component({ inputs: ['hero'], outputs: ['deleteRequest'], })
@Directive({ outputs: ['clicks:myClick'] // propertyName:alias })
管道操作符
<div>{{currentHero | json}}</div> 返回 json 数据
安全导航操作符和非空断言符
{{myHero?.name}}