在Angular里,有两种绑定,一种是数据绑定(Data Binding),另一种是事件绑定(Event Binding)。
数据流从类到视图则是数据绑定,即在类中改变变量的值,UI视图会跟着改变;反之,事件绑定是随着触发UI视图,类中也会产生相应的变化,比如鼠标点击、键盘点击触发事件。双向绑定则是数据绑定+事件绑定的结合。下面讲一一介绍数据绑定、事件绑定和双向绑定。
一、数据绑定 Data Binding
打开使用Angular CLI命令创建一个组件,命名为test
ng g c test
文件根目录如下:
app.component.x 系列为页面的根模块,可由多个components组成,上述的test就是其中之一,每一个component中包括属于自己.html, .css,.ts文件,在根结构中可以引用各个component。
app.component.ts 里可以定义元数据,比如@Component,其里面的templateUrl、styleUrls会告诉 Angular 从哪里获取你为组件指定html和css文件。
方法一:
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }
方法二:可以使用在元数据里的template和styles直接定义html和css,如下方式
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2> Welcome {{name}} </h2> ` , styles: [` .text-success { color : green; } .text-danger { color : red; } .text-special { font-style : italic; } `] }) export class AppComponent { title = 'app'; }
若使用方法一,则可以在其对应的html中,引用其他模块,比如test模块,以标签<app-test></app-test> 的方式嵌入。
app.component.html
<div style="text-align:center"> <h1> From AppComponent! </h1> <app-test></app-test> </div>
二、属性绑定 Property Binding
Property Binding是对html中标签属性进行绑定,下面在test模块下进行一系列绑定操作,在此模块使用上述方法二对进行模块开发,代码皆在test.component.ts下编写。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> // [id] = "myId" 是把在TestComponent里声明的myId的值赋给html的相应标签中id属性,即id = "testId",并绑定该属性。 <input id = {{myId}} type = "text" value = "Vishwas"> <input [id] = "myId" type = "text" value = "Wish"> ` , styles: [` .text-success { color : green; } .text-danger { color : red; } .text-special { font-style : italic; } `] }) export class TestComponent implements OnInit { public name = "Dan" public myId = "testId" constructor() { } ngOnInit() { } }
在命令行内CLI输入 ng serve,开启http://localhost:4200/服务,在浏览器下访问http://localhost:4200/,并对控件进行监测(inspect),效果如下,显示为 id = "testId",说明绑定成功!
三、class类绑定 Class Binding
Class Binding是对 css 中的class类进行绑定,方法和Property Binding相似。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> <input id = {{myId}} type = "text" value = "Vishwas"> <input [id] = "myId" type = "text" value = "Wish"> <h2 class="text-success"> Convolution </h2> <h2 [class]="successClass"> Convolution </h2> // [class.text-danger] = "hasError" 若hasError变量为true,则应用text-danger,显示为红色;否则,显示为默认颜色,黑色。 <h2 [class.text-danger] = "hasError"> Convolution </h2> // [ngClass]="messageClasses" 只应用messageClasses集合中结果为true的类,如果有两个以及的变量为true,则同时应用于该标签。必须"text-danger"和"text-special"为true,显示为斜体红色。 <h2 [ngClass]="messageClasses"> Convolution </h2> ` , styles: [` .text-success { color : green; } .text-danger { color : red; } .text-special { font-style : italic; } `] }) export class TestComponent implements OnInit { public name = "Dan"; public myId = "testId" public isDisabled = false; public successClass = "text-success" public hasError = true; public isSpecial = true; public messageClasses = { "text-success": !this.hasError, //false "text-danger": this.hasError, //true "text-special": this.isSpecial //true } constructor() { } ngOnInit() { } }
效果图如下:
四、style样式绑定 Style Binding
Style Binding是对 css 中的style进行绑定,方法和Class Binding相似。直接贴代码:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h2> Welcome {{name}} </h2> <h2 [style.color] = "hasError ? 'red':'green'"> Style Binding </h2> <h2 [style.color] = "highlightColor"> Style Binding2 </h2> <h2 [ngStyle] = "titleStyles"> Style Binding3 </h2> ` , styles: [] }) export class TestComponent implements OnInit { public name = "Dan"; public highlightColor = "orange" public titleStyles = { color: "blue", fontStyle: "italic" } constructor() { } ngOnInit() { } }
效果图如下:
五、事件绑定和双向绑定 Event Binding & Two Ways Binding
通过点击按钮,改变类中的变量,在呈现到视图上,这个过程就是一种事件绑定。粉色代码处为事件绑定。
实时监视UI的控件,若有值的变化,变量可以接收到此变化,并重新分配该值,再自动把该值更新到视图,这就是双向绑定。蓝色代码处为双向绑定。
temp.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-temp', template: ` <button (click) = "onClick($event)">Greet</button> <button (click) = "greeting = 'inline Greet!!'">Greet2</button> <p>{{greeting}}</p> <input [(ngModel)] = "name" type="text"> {{name}} `, styles: [] }) export class TempComponent implements OnInit { public name = ""; public greeting = ""; onClick(event){ this.greeting = 'Greeting!!'; //console.log(event); console.log(event.type); } constructor() { } ngOnInit() { } }
Angular不能直接识别ngModel,需要通过一个单独的模块FormsModule来访问,因此我们要引用这个模块,即在app.module.ts里import FormsModule,如下代码:
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'; import { AppComponent } from './app.component'; import { TestComponent } from './test/test.component'; import { TempComponent } from './temp/temp.component'; @NgModule({ declarations: [ AppComponent, TestComponent, TempComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
效果图如下: