Angular 2-模板
1 什么是模板
它是页面呈现的骨架，是盛装组件数据的容器。与之相关的内容包括了模板与组件件数据交互、内置指令、表单、管道等。
1.1 模板语法概览
//插值：绑定属性变量的值到模板中
<p>{{ detail.telNum }}p>
//DOM元素属性绑定：将模板表达式name的值绑定到元素<div>的属性title上
<div [title]="name">div>
//HTML标签特性绑定：将模板表达式的返回值绑定到元素<td>标签特性colspan上
<td [attr.colspan]="{{ 1+2 }}">合并单元格td>
//Class类绑定：当isBlue()函数值为true时为div添加类名为isBlue的样式
<div [class.isblue]="isBlue()">div>
//Style样式绑定：当表达式isRed的值为为true时设置button的文字颜色为红色，否则为绿色
<button [style.color]="isRed ? 'red':'green'">红色button>
//事件绑定：单击元素时会触发click事件，需要时也可以传递$event对象，如(click)="editContact($event)"
<a class='edit' (click)="editContact()">a>
//双向绑定：组件和模板间双向数据绑定，等价于<div [title]="name" (titleChange)="name=$event">div>
<div [(title)]="name">div>
//模板局部变量：在当前模板中创建一个对id值为name的input元素的引用变量name，相当于document.getElementById("name")
<input type='text' ##name name="name" id="name"/>
//管道操作符：原始数据birthday经管道转换后输出期望数据并显示在模板中
<p>张三的生日是{{ birthday | date }}p>
//模板表达式操作符：模板表达式操作符表明detail.telNum属性不是必须存在的，如果它的值是undefined，那么后面的表达式将会被忽略，不会引发异常
<p>{{ detail?.telNum }}p>
//星号前缀：使用星号前缀可以简化对结构指令的使用，Angular会将带有星号的指令引用替换成带有<template>标签的代码，等价于<template [myUnless]="boolValue"><p>myUnless is false now.p>template>
<p *myUnless="boolValue">myUnless is false now.p>2 数据绑定
根据数据流向可以分为三种：
- 单向：数据源到视图
//插值DOM元素属性
<p>{{ detail.telNum }}P>
//绑定HTML标签特性
<div [title]="name">div>
//绑定
<div [style.color]="color">hello worlddiv>- 单向：从视图目标到数据源
//事件绑定
(click)="editContact()"
on-click="editContact()"- 双向
//双向绑定
<div [(title)]="name">div>
<div bindon-title="name">div>NOTE
Property为DOM对象属性，以DOM元素作为多想，其附加内容，是在文档对象模型里定义的，如childNodes、firstChild。 而Attribute为HTML标签特性，是DOM节点自带的属性，在HTML中定义的，即只要是在HTML标签中出现的属性（HTML代码）都是Attribute。
数据绑定是借助于DOM对象属性和事件来运作的。
2.1 插值
双大括号{{ }}语法来实现。
2.2 模板表达式
类似于JS的表达式，绝大多数JS表达式均为合法模板表达式。它应用于插值语法双大括号中和属性绑定“=”右侧的括号中。但以下JS表达式不是合法模板表达式：
- 带有new运算符的表达式
- 赋值表达式
- 带有 ; 或者 , 的链式表达式
- 带有自增自减
模板表达式不支持位运算。
2.3 属性绑定
DOM元素属性绑定：把DOM对象属性绑定到组件的属性上，而绑定目标可以是中括号，也可以加前缀，还可以使用属性绑定设置自定义组件的输入属性。
//中括号
<div [title]="titleText">div>
//加前缀
<div bind-title="titleText">div>
//自定义组件的输入属性
"currentUser"> NOTE：
中括号的作用是计算右侧模板表达式，如果没有中括号，右侧表达式会被当成字符串常量，如果是字符串常量则建议省略中括号，例如：
<user-detail detail="我是字符串常量" [user]="currentUser">user-detail>HTML标签特性绑定：纯粹的HTML标签特性比如 HTML标签特性绑定类似于属性绑定，但是中括号的部分不是一个元素的属性名，而是由 CSS类绑定：CSS类既属于DOM对象属性，也属于HTML标签特性，所以可以使用以上两种方式绑定： 特有的绑定方式：[class.class-name]语法，被赋值为true时，将class-name这个类添加到该绑定的标签上，否则移除这个类。 Style样式绑定：HTML标签内联样式可以通过 单向，数据从模板到组件类流动。Angular监听用户操作时间，如键盘事件、鼠标事件、触屏事件等方法。事件绑定的语法为：“=”左侧小括号内的目标事件和“=”右侧引号中的模板语句组成。 模板语句与模板表达式一样，和JS表达式类似，有一些JS表达式在模板语句中不被支持： 模板语句和模板运算符一样，只能访问其上下文环境的成员，模板语句的上下文环境就是绑定事件对应组件的实例。也可以包含组件外的对象，如模板局部变量和事件绑定语句中的 目标事件：小括号中的事件名表示目标事件，还可以带on-前缀的形式来标记目标事件，还可以是自定义指令的事件： $event事件对象： 自定义事件：借助 子组件 [ ]实现了数据流从组件类到模板，( )实现了数据流从模板到组件类。 绑定声明中，“=”左侧的称为绑定目标，“=”右侧称为绑定源。 绑定目标必须被明确地标记为输入或输出属性，可以以修饰符（ NgClass：通过它，可以动态添加或移除多个类。 NgStyle：设置多个内联样式。绑定刑如 NgIf：绑定一个布尔类型的表达式，当表达式真时候，DOM树节点上添加一个元素及其子元素，否则移除（查看DOM树不能看到该元素）。 NgStitch：根据 NgFor：重复执行某些步骤来展现数据，它支持一个可选的index索引，下标范围为0<=index<数组的长度。 NgForTrackBy：每次更改都会引发很多相关联的DOM操作，使用 HTML内置表单标签一些特性存在浏览器兼容性问题，在自定义规则、表单数据获取、处理、提交等流程都比较复杂。Angualr提供了双向数据绑定、强大的检验规则以及自定义检验错误提示等功能。Angular提供了模板驱动（使用模板表单内置指令、内置检验方式）和模型驱动（自定义）两种方式构建表单。 NgForm：表单控制中心，负责处理表单页面逻辑，扩展了额外表单特性，表单指令在 NgModel： 控件中使用 单选框： 复选框： 单选下拉框： 多选下拉框： 与单选下拉框类似，不过返回值为选中数据的数组。 模板局部变量：模板中对DOM元素或指令（包括组件）的引用（作用类似于 DOM元素局部变量：局部变量名前加#符号或者加ref-前缀 表单指令局部变量：表单指令的局部变量在定义时需手动初始化为特定指令的代表值，最终解析后会被赋值为表单指令实例对象的引用。 局部变量 局部变量 表单状态： 表单状态检验有三个时段，初始状态、输入后状态( NgModelGroup指令：对表单输入内容进行分组，方便在语义上区分不同类型的输入。 ngSubmit事件： "contactName.valid || contactName.pristine">用户名长度为3-10个字符 表单内置检验： 表单自定义检验 首先要导入ReactiveFormsModule 分别定义了 Angular中，管道可以按照开发者指定的规则将模板内的数据进行转换。 模板中，通过管道操作符 | 使用管道，| 左边的为输入数 据，右边为管道。管道可以带有参数，通过传入参数输出不同格式数据。同时，模板表达式中可以同时使用多个管道进行不同的处理。 内置管道：Angular提供的，不需导入可以直接使用。 自定义管道：通过以下几个步骤实现 {{ sexValue | sexReform }} 纯管道与非纯管道的区别：只有发生纯变才会调用该管道，这类管道称为纯管道，其余的管道成为非纯管道。纯变指的是对基本数据类型（String、Number、Boolean）输入值的变更或者对对象引用（Array、Function、Object）的更改。 只要数据发生改变，均会触发非纯管道，但不一定会触发纯管道，需要考察数据变化的情形是否为纯变化。看下面这个例子： {{ dateObj | date: "y-MM-dd HH:mm:ss EEEE" }} {{ dateStr | date: "y-MM-dd HH:mm:ss EEEE" }} 初始日期分别为： 2s之后变成了 你猜这是为什么呢？？？？？？的
colspan采用和DOM一样的绑定方式会报错，例如：
//以下模板会出现解析错误
<table>
<tr>
<td colspan="{{ 1 + 2 }}">td>
tr>
table>
//正确的HTML标签特性绑定
<table>
<tr>
<td [attr.colspan]="{{ 1 + 2 }}">td>
tr>
table>attr.前缀和HTML元素特性名称组成的形式。<div class='red font14' [class]="changeGreen">14号 绿色字div><div [class.class-blue]="isBlue()">若isBlue()返回true，这里的字体将变成蓝色div>
<div class="footer" [class.footer]="showFooter">若showFooter为false，则footer这个css被移除div>Style样式绑定的方式设置。语法为[style.style-property]，可以带单位如px和%：<button [style.background-color]="canClick ? 'blue' : 'red'">若canClick为true，则按钮背景颜色为蓝色button>
<button [style.font-size.px]="isLarge ? 18 : 13">若isLarge为true，则按钮字体变为18pxbutton>2.4 事件绑定
$event<a class="edit" (click)="editContact()">a>
<a class="edit" on-click="editContact()">a>
<a class="edit" (myClick)="editContact=$event">a>$event事件对象用来获取事件的相关信息，如果目标事件是原生DOM元素事件（可以是自定义事件），则$event将是一个包含了target和target.value属性的DOM时间对象，例如："currentUser.firstName" (input)="currentUser.firstName=$event.target.value"/>EventEmitter实现。它的实现步骤：一、在组件中创建EventEmitter实例对象，并将其以输出属性形式暴露；二、父组件通过绑定一个属性来自定义一个事件；三、在组件中调用EventEmitter.emit()触发自定义事件；四、父组件绑定的事件通过$event对象访问数据。//父组件collection.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'collection',
template: `
click事件触发collectTheContact方法，该方法调用EventEmitter实例化对象onCollect（）的emit方法，向父组件发送数据；父组件绑定了子组件的onCollect事件，该事件被触发后将调用父元素的collectTheContact($event)方法，并以$event访问数据。2.5 双向数据绑定
//最原始的实现方式
value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value"/>
//借助于NgModel，展开形式
"currentUser.phoneNumber" (ngModelChange)="currentUser.phoneNumver=$event"/>
//最简洁的方式
"currentUser.phoneNumber"/>2.6 输入输出属性
//list.component.html
<list-item [contact]="contact" (routerNavigate)="routerNavigate($event)">list-item>list-item中，数据通过模板表达式流向目标属性contact，因而contact在ListComponent中是一个输入属性。而事件绑定中，数据流向routerNavigate绑定源，传递给接收者，routerNavigate是一个输出属性。@Input和@Output）或组件元数据（inputs和outputs）两种方式声明。//goto是别名
@Output('goto') clicks = new EventEmitter3 内置指令
NgClass绑定一个由CSS类名：value的对象，value是一个布尔类型的数据值，当value为true时添加对应的类名到模板元素中，反之删除。setClasses(){
let classes={
red: this.red,
font14: !this.font14,
title: this.isTitle
}
return classes
}
<div [ngClass]="setClass()">div>CSS属性名：value的对象。setStyles(){
let styles = {
'color': this.red ? 'red' : 'blue',
'font-size': !this.font14 ? '14px' : '16px',
'font-weight': this.isSpecial ? 'bold' : 'normal'
};
return styles;
}
<div [ngStyle]="setStyles">div><div *ngIf="collect.length === 0">div>NgSwitch绑定的模板表达式返回值决定添加那个模板元素到DOM节点上。<span [ngSwitch]="contactName">
<span *ngSwitchCase="'TimCook'">蒂姆·库克span>
<span *ngSwitchCase="'BillGates'">比尔盖茨span>
<span *ngSwitchDefault>无名氏span>
span><div *ngFor="let contact of contacts;let i=index">{{i + 1}} - {{ contact.id }}div>NgFor会让性能变得很差，比如重新从服务器拉取列表数据，虽然大部分数据没变化，但是因为不知道哪些数据变化了，需要清空并重新渲染。可以通过使用追踪函数避免重复渲染的性能浪费。trackByContacts(index: number, contact: Contact){
return contact.id;
}
<div *ngFor="let contact of contacts; trackBy: trackByContacts">{{ contact.id }}div>4 表单
4.1 一个模板表单例子
@Component{
selector: 'add-content',
template: `
<h3>添加联系人h3>
<form>
<ul>
<li>
<label for="name">姓名：label>
<input type='text' name='name'/>
li>
<li>
<button type='submit'>添加button>
<button type='button'>取消button>
li>
ul>
form>
`
}
export class FormComponent {}4.2 表单指令
NgForm指令内部才能正常运行。NgForm的使用步骤如下：
FormsModule模块和FormComponent组件FormComponent组件中直接使用NgFormimport { NgModule } from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent} from './app.component';
import { FormComponent} from './form.component';
@NgModule({
imports:[
BrowserModule,
FormsModule
],
declarations:[
AppComponent,
FormComponent
]
})NgModel实现了表单控件的数据绑定，提供了控件状态跟踪和检验功能。type='text' name='contactName' [(ngModel)]="curContact.name"/>NgModel，必须添加name属性，否则报错。原因是，NgForm指令为表单建立一个控件对象FormControl的集合，以此来作为表单控件的容器。控件的NgModel属性绑定会以name作为唯一标识来注册并生成一个FormControl，并将其加入到FormControl的集合中。NgModel会绑定选中的单选框的值type='radio' name="sex" [(ngModel)]="curContact.sex" value="female" />女
type='radio' name="sex" [(ngModel)]="curContact.sex" value="male" />男NgModel会绑定一个布尔值type='checkbox' name="lock" [(ngModel)]="curContact.lock" />option绑定目标有两种，value和ngValue，value返回值类型为基本数据类型，ngValue返回值为对象数据类型。//第一步：定义下拉框列表所需的数据
export class FormComponent {
interests:any[] = [
{value: 'reading', display: '阅读'}，
{value: 'traveling', display: '旅游'}，
{value: 'sport', display: '运动'}
]
}
//第二步：构建下拉框模板
<select name="interestValue" [(ngModel)]="curContact.interestValue">
select>getElementById），可以使用在当前元素、兄弟元素或任何子元素中。type='text' #contactName name="contactName" id="contactName"/>
type='number' ref-telNum name="telNum" id="telNum"/>
#contactForm为NgForm指令实例对象的引用，可以在模板中读取NgForm实例对象的属性值，如追踪表单的valid属性状态。
<input type='text' name="contactName" [(ngModel)]="curContact.name" #contactName="ngModel"/>
<p>{{ contactName.valid }}p>contactName是NgModel指令实例对象的引用，可以通过它读取NgModel的属性值。NgForm和NgModel指令都可以用于追踪表单状态来实现数据检验，他们都有五个表示状态的属性，属性值为布尔类型，可通过对应的局部变量来获取。NgForm追踪的是整个表单控件的状态，NgModel追踪单个控件。
valid：表单值是否改变pristine：表单值是否未改变dirty：表单值是否已改变touched：表单是否已被访问过untouched：表单时是否未被访问过valid、pristine、dirty状态改变)、失去焦点后状态(touched和untouched状态改变)。<fieldset ngModelGroup="nameGroup" #nameGroup="ngModelGroup">
<label>姓：label>
<input type='text' name="firstName" [(ngModel)]="curContact.firstName" required/>
<label>名：label>
<input type='text' name="lastName" [(ngModel)]="curContact.lastName" required/>
fieldset> //这是form中的数据格式
{
nameGroup: {
firstName: '',
lastName: ''
}
}<form #contactForm="ngForm" (ngSubmit)="doSubmit(contactForm.value)">
<li>
<button type='submit' [disabled]="!contactForm.value">
添加
button>
<button type='reset'>重置button>
li>
form>
export class FormComponent{
doSubmit(formValue: any){
}
}4.3 自定义表单样式
.ng-valid[required] {
border-left: 5px solid #0f0;
}
.ng-invalid {
border-left: 5px solid #f00;
}
4.4 表单检验
required、minlength、maxlength、pattern
//validate-username.ts
import { FormControl } from '@angular/forms';
const EMAIL_REGEXP = new RegExp("[a-z0-9]+@[a-z0-9]+.com");
const TEL_REGEXP = new RegExp("1[0-9]{10}");
export function validateUserName(c: FormControl) {
return (EMAIL_REGEXP.test(c.value) || TEL_REGEXP.test(c.value)) ? null : {
userName: {
valid: false,
errorMsg: '用户名必须是手机号或者邮箱账号'
}
};
}
//...
import { ReactiveFormsModule } from '@angular/forms';
import { FormComponent } from './form.component';
import { AppComponent} from './app.component';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent, FormComponent],
bootstrap: [AppComponent]
})
export class AppModule {}import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { validateUserName } from './validate-username';
@Component({
selector: 'add-contact',
template: `
`
})
export class FormComponent{
customForm = new FormGroup({
customName: new FormControl('', validateUserName)
});
}FormGroup和FormControl的实例化对象5 管道
5.1 什么是管道
<p>{{ birthday | date }}p>
<P>{{ birthday | data:"MM/dd/y" }}p>
<p>{{ expression | pipeName1 | pipeName2 }}p>5.2 几种管道
expression | date: format
expression | json
expression | uppercase
expression | lowercase
expression | number[: digitInfo]
expression | currency[: currencyCode[: symbolDisplay[: digitInfo]]]
expression | percent
expression | slice: start[: end]
//sexreform.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";
@Pipe {
name: 'sexReform'
}
export class SexReform implements PipeTransform {
//...
}
export class SexReform implements PipeTransform {
transform(val: string): string {
switch(val) {
case 'male': return '男';
case 'female' return '女';
default: return '未知性别';
}
}
}
//使用管道前，需要在@NgModule的元数据declarations数组中添加自定义管道
import { SexReform } from 'pipes/sexreform.pipe';
@NgModule ({
//...
declarations: [SexReform]
})
//可以像内置管道一般使用自定义管道咯
@Component ({
selector: 'pipe-demo-custom',
template: `
//...
@Component ({
selector: 'pure-pipe-demo',
template: `
<div>
'2016-06-08 20:05:08 Wednesday'
'2016-06-08 20:05:08 Wednesday''2016-06-08 20:05:08 Wednesday'
'2016-12-08 20:05:08 Thursday'你可能感兴趣的:(理论技术：Angular)