Angular資料繫結、響應式程式設計、管道
阿新 • • 發佈:2019-01-04
資料繫結
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>