在 Angular 當中,預設的父元件就是 app-root,也就是 app.component,因此所有的元件都會是 app.component 的子元件。
@Input() 裝飾器可以接收來自父元件的值。
@Output() 裝飾器可以將子元件的值傳遞給父元件。
直接看範例,這邊有一個 sizer.component,是 app.compoment 的子元件。
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-sizer',
templateUrl: './sizer.component.html',
styleUrls: ['./sizer.component.css']
})
export class SizerComponent implements OnInit {
@Input() size: number | string;
@Output() sizeChange = new EventEmitter();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
constructor() { }
ngOnInit(): void {
}
}
size 負責接收來自父元件的值,而 sizeChange 宣告為EventEmitter 的泛型輸出類別,利用 emit() 方法將子元件的值傳遞給父元。要注意的是,要使用下面介紹的雙向繫結語法糖 [( )] 必須要遵守命名規則,負責通知父元件的變數必須命名為 xxChange 才行。
而 dec() 以及 inc() 負責呼叫 resize 來更新值。
這裡比較值得注意的地方是 this.sizeChange.emit() ,利用 emit() 方法來將子元件的值傳遞給父元件。
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
這裡利用事件繫結呼叫 dec() 以及 inc() ,利用屬性繫結改變字的大小,利用內嵌繫結輸出 size 的值。
import { Component, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EventEmitter } from 'protractor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fontSizePx = 16;
}
父元件部分就只設定一個 fontSizePx ,預設值為 16。
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
這裡使用的是雙向繫結的語法糖 [( )],可以省去使用事件繫結呼叫子元件更新值。
然後一樣使用屬性繫結來更改字的大小。效果如下:
由於表單,如 <input> 之類的標籤並沒有產生任何符合上述命名條件的變數,所必須直接使用 [(ngModel)]="" 來進行表單的雙向繫結。
import { Component, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EventEmitter } from 'protractor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
two_msg="";
}
只定義一個 two_msg 的空字串。
<p>This is two_msg : {{two_msg}}</p>
<input type="text" [(ngModel)]="two_msg">
使用內嵌繫結來輸出 two_msg 的值,在 <input> 上使用雙向繫結語法繫結 two_msg 的值。效果如下:
到這裡為止,我們已經介紹完了 Angular 的資料繫結部分。