[ Angular ] 快快樂樂學習 Angular 之路 - 4 Component資料交互

Angular中的應用由各式各樣的 Component 交互作用而成,

這些 Component 形成一個 Component Tree,

資料可以在 Component Tree 透過 屬性 [ Property ] 、事件 ( event ) 傳遞。

 

大綱


Angular 提供兩種語法處理 Componet 之間的資料傳遞

輸入 @Input()
輸出 @Output ()

 

父組件向子組件傳遞資料


 

father.component.html

<app-child [title]="childTitle"></app-child>
子組件提供 title 屬性供父組件 childTitle 提供資料給它

 

father.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent {
  childTitle = 'Child Title';

}

 

child.component.html

<h1>{{ title }}</h1>

 

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() title: string;
}

兩件事情需要注意

從 @angular/core import Input( )
在要對外開放的變數前,加上 @Input( ) 



可能會有一個疑問,為什麼 @Input ( ) 後面會有一個括號可是我們都沒有使用到呢?

  •  如果你有需要在 父組件 屬性綁定時調整名稱,但是不想異動整個 component.ts 內變數可以使用
  • 不太建議這樣做,應該透過重構功能鍵 (你可以看到必須使用 忽略掉 tslint 警告 )
father.component.html
<!-- <app-child [title]="childTitle"></app-child> -->
<app-child [newTitle]="childTitle"></app-child>

 

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // @Input('title') title: string;

  // tslint:disable-next-line:no-input-rename
  @Input('newTitle') title: string;
}

 

子組件向父組件傳遞資料


 

father.component.html

<app-child (triggerFather)="trigger()"></app-child>
<p>counter : {{ counter }}</p>

 

father.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent {
  counter = 0;
  trigger() {
    this.counter++;
  }
}

 

child.component.html

<button (click)='trigger()'>add Counter</button>

 

child.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() triggerFather = new EventEmitter();

  trigger() {
    this.triggerFather.emit();
  }
}

結果

事件傳遞是子組件向父組件傳遞資料最常使用的方式
使用 EventEmitter 類別,用來訂閱和觸發自定義事件
由 Output 裝飾器修飾 輸出屬性 ( ex :  triggerFather  )
父組件透過事件綁定 ( ex : trigger ) 的方式訂閱子組件觸發的事件 ( ex : click )

 

結論


在 Angular 當中還有許多種不同的傳遞方式,

這裡僅提到最基本的兩種,

希望對各位有幫助 :)