แนวคิดและวิธีใช้ Attribute Directive สำหรับ Component ใน Angular 4 เป็นต้นไป

อัพเดตเนื้อหาแล้ว ใช้ได้ตั้งแต่ Angular 2 เป็นต้นไปนะ

ใน Angular มาพร้อมกับแนวคิด Component และ Directive ที่นำโลกของ Web ฝั่ง Front-end มาถึงอีกระดับ แต่มันก็อาจจะพาโจทย์ใหม่ๆ มาให้นักพัฒนาเว็บอย่างพวกเราขบคิดกันด้วยว่า

“จะทำ ___ ได้ไงฟะ??”

ระหว่างการอบรม MEAN Stack และ Angular Essential Training หนึ่งในโจทย์นั้น คือการนำ Angular Component มาใช้ใน Angular Component อีกอันหนึ่ง ในทางเทคนิคแล้ว หลายคนก็เรียกว่า Parent Component และ Nested Component และการส่งข้อมูลระหว่าง Component ทั้ง 2 ตัวครับ

โจทย์ของ Parent Component และ Nested Component

ถ้าเราต้องการสร้างให้ Component สามารถรับข้อมูลผ่าน Attribute ได้เหมือน HTML tag ทั่วไป อย่างเช่นที่แท๊ก <img /> จะมี attribute ชื่อ src ที่กำหนดที่อยู่ของไฟล์รอบภาพ

<img src="assets/profile.jpg" />

ซึ่งเราก็สามารถสร้าง Attribute ได้แบบเดียวกัน เช่น

<app-nextflow [name]="username"></app-nextflow>




โดย Angular มีชื่อเรียกการสร้าง Attribute นี้ว่า Attribute Directive

วิธีประกาศ Property ของ Component เป็น Attribute

เราสามารถสร้าง Attribute Directive ที่ว่านี้ โดยใช้ @Input() ครับ โดยเราสามารถกำหนดให้กับ property ที่ต้องการได้แบบนี้

// NextflowComponent.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-nextflow',
}) 

export class NextflowComponent implements OnInit {

  @Input() name : string;

}

 




วิธีนำ Attribute Directive ไปใช้งาน

หลังจากสร้าง Attribute Directive แล้ว ก็ถือว่าเราสามารถเรียกใช้ Attribute ของ Component เราได้อย่างสมบูรณ์ เช่นจะใช้ Data-binding

<app-nextflow [name]="username"></app-nextflow>




หรือ expression ก็ได้

<app-nextflow name="{{ username }}"></app-nextflow>




สรุปวิธีสร้าง และใช้งาน Attribute Directive

พอเราเข้าใจโจทย์แล้ว จะเห็นว่า @Input() เป็นกลไกสำคัญในการเปลี่ยนให้ Property ธรรมดาๆ ใน Component สามารถถูกเรียกใช้งานได้ในรูปแบบ Attribute แบบเดียวกับ HTML tag นั่นเอง