数据绑定
1.事件绑定
函数调用:
属性赋值:
example:
1.1创建项目
–> ng new demo1
1.2生成组件
–> ng g component bind
1.3
bind.component.html
<p>
bind works!
</p>
<button (click)="doOnClick($event)">点我</button>
bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
doOnClick(event: any) {
console.log(event);
}
}
app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-bind></app-bind>
1.4运行
点击按钮,查看控制台
–> npm run start
属性绑定:
bind.component.html
<p>
bind works!
</p>
<!--事件绑定-->
<button (click)="doOnClick($event)">点我</button><br>
<!--属性绑定-->
<img [src]="imgUrl"/>
<!--属性绑定:插值表达式-->
<img src="{{imgUrl}}"/>
bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
imgUrl: string
imgUrl = 'http://placehold.it/400x220';
constructor() { }
ngOnInit() {
}
doOnClick(event: any) {
console.log(event);
}
}
2.Dom属性绑定
bind.component.html
<p>
bind works!
</p>
<!--事件绑定-->
<button (click)="doOnClick($event)">点我</button><br>
<!--属性绑定-->
<img [src]="imgUrl"/>
<!--Dom属性绑定:插值表达式-->
<img src="{{imgUrl}}"/>
<!--html与Dom绑定的区别-->
<!--浏览器在渲染字符串时,创建相应的Dom节点-->
<input value="Tom" (input)="doOnInput($event)">
==4.双向绑定==
bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
templateUrl: './bind.component.html',
styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
imgUrl: string
imgUrl = 'http://placehold.it/400x220';
constructor() { }
ngOnInit() {
}
doOnClick(event: any) {
console.log(event);
}
doOnInput(event: any) {
/*打印dom属性,改变*/
console.log('Dom:' + event.target.value);
/*打印html属性,不变*/
console.log('Html:' + event.target.getAttribute('value'));
}
}
注:
<button disabled=’“false”>
禁用:通过html属性修改true,false无效
只能通过dom属性修改true,false
3.html属性
优先使用Dom绑定
错误示范example:
td元素没有colspanDom属性
<table>
<tr>
<td colspan="{{1+1}}">慕课网</td>
</tr>
</table>
运行:
正确示范example:
bind.component.html
<!--html绑定-->
<table>
<tr>
<td [attr.colspan]="size">慕课网</td>
</tr>
</table>
bind.component.ts
size = 2;
.a {
background: yellow;
}
.b {
color: red;
}
.c {
font-size: 60px;
}
<div class="a b c">慕课网</div>
1
divClass: string;
constructor() {
setTimeout(() => {
this.divClass = 'a b c';
}, 3000);
}
<div [class]="divClass">慕课网</div>
2
isBig: boolean;
constructor() {
setTimeout(() => {
this.isBig = true;
}, 3000);
}
<div class="a b" [class.c]="isBig">慕课网</div>
3
divAllClass: any = {
a: false,
b: false,
c: false
}
constructor() {
setTimeout(() => {
this.divAllClass = {
a: true,
b: true,
c: true
};
}, 3000);
}
<div [ngClass]="divAllClass">慕课网</div>
1
isDev = true;
constructor() {
setTimeout(() => {
this.isDev = false;
}, 3000);
}
1.1
<div [ngClass]="divAllClass">慕课网</div>
1.2
<div [style.font-size.em]="isDev?3:1">慕课网</div>
2
divAllStyle: any = {
color: 'red',
background: 'yellow'
}
constructor() {
setTimeout(() => {
this.divAllStyle = {
color: 'yellow',
background: 'red'
};
}, 3000);
}
<div [ngStyle]="divAllStyle">慕课网</div>
4.双向绑定
name: string;
constructor() {
setInterval(() => {
this.name = 'Tom';
}, 3000);
}
1
<input [value]="name" (input)="doOnInput($event)">{{name}}
2
在文件 app.component.ts 中引入ngModel
注:不引入就使用报错
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BindComponent } from './bind/bind.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
BindComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<input [(ngModel)]="name">{{name}}
响应式编程
管道
birthday = new Date();
1 无管道
<p>我的生日是:{{birthday}}</p>
2 管道:| uppercase
<p>我的生日是:{{birthday | date | uppercase}}</p>
3 管道:| date: 'yyyy-MM-dd HH:mm:ss'
<p>我的生日是:{{birthday | date: 'yyyy-MM-dd HH:mm:ss' | uppercase}}</p>
pai = 3.1415926;
4 无管道
<p>圆周率是:{{pai}}</p>
5 管道:| number: '2.2-2'
整数位.小数最少-小数最多
<p>圆周率是:{{pai | number: '2.2-2'}}</p>
自定义管道
1.生成管道
–> ng g pipe pipe/multiple
2.multiple.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'multiple'
})
export class MultiplePipe implements PipeTransform {
transform(value: number, args?: number): any {
if (!args) {
args = 1;
}
return value * args;
}
}
size = 7;
<p>自定义管道:{{size | multiple}}</p>
<p>自定义管道:{{size | multiple: '2'}}</p>