元件互動

父元件與子元件

在 Angular 當中，預設的父元件就是 app-root，也就是 app.component，因此所有的元件都會是 app.component 的子元件。

@Input

@Input() 裝飾器可以接收來自父元件的值。

@Output()

@Output() 裝飾器可以將子元件的值傳遞給父元件。

直接看範例，這邊有一個 sizer.component，是 app.compoment 的子元件。

子元件 sizer.component.ts

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

size 負責接收來自父元件的值，而 sizeChange 宣告為EventEmitter 的泛型輸出類別，利用 emit() 方法將子元件的值傳遞給父元。要注意的是，要使用下面介紹的雙向繫結語法糖 [(  )]  必須要遵守命名規則，負責通知父元件的變數必須命名為 xxChange 才行。

dec() 以及 inc()

而 dec() 以及 inc() 負責呼叫 resize 來更新值。

redize()

這裡比較值得注意的地方是 this.sizeChange.emit() ，利用 emit() 方法來將子元件的值傳遞給父元件。

子元件 sizer.component.html

<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 的值。

父元件 app.component.ts

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.component.html

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

[(size)]

這裡使用的是雙向繫結的語法糖 [(  )]，可以省去使用事件繫結呼叫子元件更新值。

然後一樣使用屬性繫結來更改字的大小。效果如下：

表單中的雙向繫結 [(ngModel)]

由於表單，如 <input> 之類的標籤並沒有產生任何符合上述命名條件的變數，所必須直接使用 [(ngModel)]="" 來進行表單的雙向繫結。

app.component.ts

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 的空字串。

app.component.html

<p>This is two_msg : {{two_msg}}</p>
<input type="text" [(ngModel)]="two_msg">

使用內嵌繫結來輸出 two_msg 的值，在 <input> 上使用雙向繫結語法繫結 two_msg 的值。效果如下：

到這裡為止，我們已經介紹完了 Angular  的資料繫結部分。