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 的类型检查器对特定的属性表达式，不做 "严格空值检测"。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!