Angular數據綁定、響應式編程、管道

數據綁定

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>