angular4笔记系列之模板与数据绑定

模板与数据绑定

绑定语法

单向

从数据源到视图目标:

{{expression}}
[target]="expression"
bind-target="expression"

从视图目标到数据源:

(target)="statement"
on-target="statement"

双向

[(target)]="expression"
bindon-target="expression"

插值表达式 ({{...}})

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

通常来讲，括号间的素材是一个模板表达式，Angular 先对它求值，再把它转换成字符串。
严格来说，插值表达式是一个特殊的语法，Angular 把它转换成了属性绑定，后面将会解释这一点。

模板表达式

编写模板表达式所用的语言看起来很像 JavaScript。
JavaScript 中那些具备或可能引起反作用的表达式是被禁止的，包括：

• 赋值 (=, +=, -=, ...)
• new运算符
• 使用;或,的链式表达式
• 自增或自减操做符 (++和--)

和 JavaScript语 法的其它显著不一样包括：

• 不支持位运算|和&
• 具备新的模板表达式运算符，好比|、?.和!

属性绑定 ( [属性名] )

<button [disabled]="isUnchanged">Save</button>

再学习属性绑定以前，先来弄懂两个概念attribute与property：

• property是DOM中的属性，是JavaScript里的对象；property 的值能够改变
• attribute是HTML标签上的特性，它的值只可以是字符串，它初始化DOM property，而后它们的任务就完成了；attribute 的值不能改变

属性绑定是经过 property 来工做的，而不是 attribute

attribute、class 和 style 绑定

模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。

1. attribute

形式：[attr. attribute]="statement"

<button [attr.aria-label]="help">help</button>

2.class
形式：[class]="statement" / [class.className]="statement"

<div class="bad curly special"
     [class]="badCurly">Bad curly</div>      //绑定到特定的类名
     
<div class="special"
     [class.special]="isSpecial">This one is not so special</div>     //判断表达式的值是否为真，来添加类名

3.style
经过样式绑定，能够设置内联样式。
形式：[style.style-property]="statement"
有些样式绑定中的样式带有单位，在这里，以根据条件来设置字体大小的单位

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

CSS 类绑定 是添加或删除单个类的最佳途径
样式绑定是设置单同样式值的简单方式

事件绑定 ( (event) )

形式：(event)="statement"

<div (myClick)="clickMessage=$event">click</div>      //绑定会经过名叫$event的事件对象传递关于此事件的信息（包括数据值）,$event就是 DOM事件对象，它有像target和target.value这样的属性。

使用 EventEmitter 实现自定义事件

• 指令建立一个EventEmitter实例，而且把它做为属性暴露出来
• 指令调用EventEmitter.emit(payload)来触发事件，能够传入任何东西做为消息载荷

deleteRequest = new EventEmitter<Hero>();

delete() {
  this.deleteRequest.emit(this.hero);
}

双向数据绑定 ( [(...)] )

形式：[(...)]="statement"
双向绑定语法其实是属性绑定和事件绑定的语法糖，比起单独绑定属性和事件，双向数据绑定语法显得很是方便。

输入输出属性 ( @Input 和 @Output )

声明输入和输出属性

//第一种方式
@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

//第二种方式
@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

给输入/输出属性起别名

//第一种方式
@Output('myClick') clicks = new EventEmitter<string>(); 

//第二种方式
@Directive({
  outputs: ['clicks:myClick']  
})

输入属性

输入属性一般接收数据值。

输出属性

输出属性暴露事件生产者，如EventEmitter对象。

模板表达式操做符

管道操做符 ( | )

安全导航操做符 ( ?. )

Angular 的安全导航操做符 (?.) 是一种流畅而便利的方式，用来保护出如今属性路径中 null 和 undefined 值。

The null hero's name is {{nullHero?.name}}

非空断言操做符（!）

<!--No hero, no text -->
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

与安全导航操做符不一样的是，非空断言操做符不会防止出现null或undefined。 它只是告诉 TypeScript 的类型检查器对特定的属性表达式，不作 "严格空值检测"。