title: Angular 指令 & 資料繫結
date: 2017-09-12 10:00
categories: Training
keywords:

• Angular
• ngIf
• ngFor
• ngStyle
• interpolation
• Property Binding
• Directive
• Binding
  tags:
• Angular
• Binding
• Directive

指令 (Directive) & 資料繫結 (Binding)

在 Angular UI：Clarity Design System 中，透過修改 tslint.json 檔的 component-selector 屬性來讓我們可以自訂元件 selector 屬性，現在同樣的來調整 first-app 專案，將 employee 資料夾內的元件改成 emp 開頭，將 home 資料夾內的元件改成 home 開頭。
修改 tslint.json 的 component-selector 設定。

調整相關元件的 selector 屬性。

{% codeblock lang:ts %}
// src\app\employee\address-book\address-book.component.ts
@Component({
selector: ‘emp-address-book’,
…

// src\app\employee\calendar\calendar.component.ts
@Component({
selector: ‘emp-calendar’,
…

// src\app\employee\file\file.component.ts
@Component({
selector: ‘emp-file’,
…

// src\app\employee\leave\leave.component.ts
@Component({
selector: ‘emp-leave’,
…

// src\app\employee\logbook\logbook.component.ts
@Component({
selector: ‘emp-logbook’,
…

// src\app\employee\reimburse\reimburse.component.ts
@Component({
selector: ‘emp-reimburse’,
…

// src\app\employee\to-do-list\to-do-list.component.ts
@Component({
selector: ‘emp-to-do-list’,
…

// src\app\home\aside\aside.component.ts
@Component({
selector: ‘home-aside’,
…

// src\app\home\header\header.component.ts
@Component({
selector: ‘home-header’,
…

// src\app\home\home.component.ts
@Component({
selector: ‘home’,
…

{% endcodeblock %}

修改 src\app\home\home.component.html，將 app-header 改為 home-header，app-aside 改為 home-aside。

{% codeblock home.component.html lang:html %}

{% endcodeblock %}

編輯行事曆

其實網路上已經有一些 Angular 版本的元件可以套用，不過這邊我們練習如何用簡單的方式就可以做出一個雛形。
開啟 src\app\custom-material.module.ts 加入 MdCardModule。

{% codeblock custom-material.module.ts lang:ts %}
import { NgModule } from ‘@angular/core’;
import { FlexLayoutModule } from ‘@angular/flex-layout’;
import {
MdIconModule,
MdButtonModule,
MdListModule,
MdToolbarModule,
MdTooltipModule,
MdSidenavModule,
MdCardModule
} from ‘@angular/material’;

@NgModule({
imports: [
FlexLayoutModule,
MdIconModule,
MdButtonModule,
MdListModule,
MdToolbarModule,
MdTooltipModule,
MdSidenavModule,
MdCardModule
],
exports: [
FlexLayoutModule,
MdIconModule,
MdButtonModule,
MdListModule,
MdToolbarModule,
MdTooltipModule,
MdSidenavModule,
MdCardModule
]
})
export class CustomMaterialModule { }

{% endcodeblock %}

開啟 src\app\employee\employee.module.ts，將 CustomMaterialModule 註冊到裡面。

{% codeblock employee.module.ts lang:ts %}
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { CalendarComponent } from ‘./calendar/calendar.component’;
import { AddressBookComponent } from ‘./address-book/address-book.component’;
import { LogbookComponent } from ‘./logbook/logbook.component’;
import { ToDoListComponent } from ‘./to-do-list/to-do-list.component’;
import { FileComponent } from ‘./file/file.component’;
import { LeaveComponent } from ‘./leave/leave.component’;
import { ReimburseComponent } from ‘./reimburse/reimburse.component’;
import { EmployeeRoutingModule } from ‘./employee-routing.module’;
import { CustomMaterialModule } from ‘../custom-material.module’;

@NgModule({
imports: [
CommonModule,
EmployeeRoutingModule,
CustomMaterialModule
],
declarations: [
CalendarComponent,
AddressBookComponent,
LogbookComponent,
ToDoListComponent,
FileComponent,
LeaveComponent,
ReimburseComponent
]
})
export class EmployeeModule { }

{% endcodeblock %}

開啟 src\app\employee\calendar\calendar.component.html，加入 card 元件，以及月份切換按鈕。

{% codeblock calendar.component.html lang:html %}


行事曆

2017 年 9 月

{% endcodeblock %}

執行專案，從瀏覽器上可以看到最外層的卡片效果。

Binding：內嵌繫結 (interpolation)

在 Angular 事件 中，我們學會 事件繫結，透過 小括號(( event )) 的方式讓前端樣板狀態變更時可以通知後端元件。
接下來我們希望畫面上的月份可以透過程式動態修改，所以我們利用 Angular 提供的另一種資料繫結模式-內嵌繫結 (interpolation)，我們可以透過2個大括號({{ variable }})方式將元件所對應 ts 檔的變數嵌入到樣板上。

若是私有(private)變數則無法存取，若變數沒有加上存取修飾詞，那預設值就是 public。

開啟 src\app\employee\calendar\calendar.component.ts，加入變數 selectedMonth，並提供方法將日期轉成文字格式給 selectedMonth。

{% codeblock calendar.component.ts lang:ts %}
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘emp-calendar’,
templateUrl: ‘./calendar.component.html’,
styleUrls: [‘./calendar.component.scss’]
})
export class CalendarComponent implements OnInit {
selectedDay: Date;
selectedMonth = ‘’;
constructor() { }

ngOnInit() {
this.getToday();
}
getToday() {
this.selectedDay = new Date();
this.getDay();
}
getDay() {
let year = this.selectedDay.getFullYear();
let month = this.selectedDay.getMonth();
month++;
// month為13時表示隔年的1月。
if (month === 13) {
month = 1;
year++;
}
this.selectedMonth = ${year} 年 ${month} 月;
}
}

{% endcodeblock %}

TypeScript 在宣告變數時必須給定型別，例如：boolean、number、string、any、…，格式是在變數後面加上冒號(:)再加上型別，但是如果有給初始值時可以省略，因為 TypeScript 會自動依初始值來推斷變數的型別，後續程式邏輯若給予的值與型別不符時就會出現警告。
TypeScript 最終還是會編譯成 JavaScript，它主要是提供了開發時期的型別檢查。
any 算是比較特殊的型別，代表它可以是任意型別，當變數設成 any 時，我們可以視為 TypeScript 就不會做檢查，當變數的值可能為不同型別時可以使用，但是宣告成 any 也代表失去 TypeScript 的檢核機制，建議盡量避免使用。
在 function 內宣告變數時，TypeScript 預設會建議你用 const 宣告，如果值會改變時則用 let。

修改 calendar.component.html，套用 selectedMonth 變數。

{% codeblock calendar.component.html lang:html %}


行事曆

{ {selectedMonth} }

{% endcodeblock %}

從瀏覽器上看不出改變，但是月份已經用變數取代。

加入月份切換功能

修改 calendar.component.html，為切換按鈕加入事件，並透過 事件繫結 綁定。

{% codeblock calendar.component.html lang:html %}


行事曆

{ {selectedMonth} }

{% endcodeblock %}

修改 calendar.component.ts 實作對應的方法。

{% codeblock calendar.component.ts lang:ts %}
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘emp-calendar’,
templateUrl: ‘./calendar.component.html’,
styleUrls: [‘./calendar.component.scss’]
})
export class CalendarComponent implements OnInit {
selectedDay: Date;
selectedMonth = ‘’;
constructor() { }

ngOnInit() {
this.getToday();
}
getToday() {
this.selectedDay = new Date();
this.getDay(0);
}

getDay(addDMonth: number) {
let year = this.selectedDay.getFullYear();
let month = this.selectedDay.getMonth() + addDMonth;
const dt = new Date(year, month, 1);
year = dt.getFullYear();
month = dt.getMonth();

this.selectedDay = new Date(year, month, 1);
month++;
// month為13時表示隔年的1月。
if (month === 13) {
  month = 1;
  year++;
}
this.selectedMonth = `${year} 年 ${month} 月`;

}
}

{% endcodeblock %}

ngOnInit 是 Angular 生命週期 衍生的事件，它會發生在第一次繫結資料發生變動(ngOnChanges)之後。

從瀏覽器來看，月份切換已經有效果了

加入 Grid List

開啟 src\app\custom-material.module.ts 加入 MdGridListModule。

{% codeblock custom-material.module.ts lang:ts %}
import { NgModule } from ‘@angular/core’;
import { FlexLayoutModule } from ‘@angular/flex-layout’;
import {
MdIconModule,
…
MdCardModule,
MdGridListModule
} from ‘@angular/material’;

@NgModule({
imports: [
FlexLayoutModule,
…
MdCardModule,
MdGridListModule
],
exports: [
FlexLayoutModule,
…
MdCardModule,
MdGridListModule
]
})
export class CustomMaterialModule { }

{% endcodeblock %}

修改 calendar.component.html，加入 Grid List。

{% codeblock calendar.component.html lang:html %}


行事曆

{ {selectedMonth} }

{% endcodeblock %}

從瀏覽器來看，行事曆的效果已經出現了

從API文件來看，MdGridListModule 與 HTML 的 Table 功能類似。
MdGridList 提供一個 cols 的屬性，當內容項目-MdGridTile 超過其數值時就會自動換行，我們設定 7 是因為一個禮拜有7天。
MdGridTile 則提供 rowspan、colspan 可以設定所占用的 列數 與 欄位數，這邊因為都是占用1單位，所以不設定。

Directive：*ngFor

Angular 提供一個樣板指令-*ngFor，讓我們可以依照陣列物件重複產生樣板語法，同時將資料嵌入到樣板內。
修改 calendar.component.ts，加入星期的陣列變數-dayHeaders。

{% codeblock calendar.component.ts lang:ts %}
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘emp-calendar’,
templateUrl: ‘./calendar.component.html’,
styleUrls: [‘./calendar.component.scss’]
})
export class CalendarComponent implements OnInit {
selectedDay: Date;
selectedMonth = ‘’;
dayHeaders = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’];
constructor() { }
…
{% endcodeblock %}

修改 calendar.component.html，透過 ngFor 指令來巡覽 dayHeaders 陣列，並宣告一個 變數(header) 來承接其值，最後再透過*內嵌繫結**將 header 嵌入到樣板內。

{% codeblock calendar.component.html lang:html %}


行事曆

{ {selectedMonth} }

const _days = [];
for (let day = 1; day <= 31; day++) {
  const time = new Date(year, month, day);
  if (time.getMonth() > month) {
    break;
  }
  const d: any = {
    day: day,
    week: time.getDay()
  };
  _days.push(d);
}
this.days = [..._days];

this.selectedDay = new Date(year, month, 1);
month++;
// month為13時表示隔年的1月。
if (month === 13) {
  month = 1;
  year++;
}
this.selectedMonth = `${year} 年 ${month} 月`;

this.lastMonth_colspan = new Date(year, month, 1).getDay();
const _days = [];
...