การทำงานของ Component ใน Angular App เบื้องต้นอย่างง่าย

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
component template property selector property angular app angular

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ component template property selector property angular app angular

ดูแล้ว 10,383 ครั้ง




เราได้รู้จักเกี่ยวกับ Angular modules ของไฟล์ app ตัวอย่าง เบื้องต้นไปแล้ว
ในบทความ 
 
ทำความรู้จักกับ Angular modules เบื้องต้นอย่างง่าย 
 
เนื้อหาในบทความตอนนี้ จะพูดถึงส่วนที่เหลือ คือ Component 
ให้เราเปิดไฟล์ที่ชื่อ app.component.ts ขึ้นมาดังรูป
 
 

 
 
Angular app ประกอบไปด้วย component ต่างๆ โดยแต่ละ component จะเป็นการ
ผสมผสานกันระหว่าง HTML template และ component class ที่จัดการอยู่ในส่วนต่างๆ
ของการแสดงผลใน app 
โค้ดด้านล่างนี้ คือตัวอย่าง component ที่ทำการแสดงข้อความอย่างง่าย
 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }
 
บรรทัดแรกจะเป็นการ import component module จาก Angular libraries มาใช้
งาน รูปแบบคล้ายๆ กับใน modules ไฟล์ของบทความที่ผ่่านมา
 
import { Component } from '@angular/core';
 
Component ทุกตัว จะขึ้นต้นด้วย @Component decorator ฟังก์ชั่นที่มี 
metadata object ด้านใน ลักษณะคล้ายกับ @NgModule decorator แต่อาจจะ
มี metadata property แตกต่างกันไป ในโค้ดตัวอย่าง @Component decorator
ของเราจะประกอบด้วย property ชื่อ selector และ template โดย metadata object
นี้จะอธิบายถึงการทำงานร่วมกันของ HTML template กับ component class ว่าเป็นอย่างไร
 
{
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
}
 

selector property

จะทำหน้าที่บอกกับ Angular ว่าให้ทำการนำ componennt มาแสดภายใน
<my-app> tag ที่กำหนดขึ้นไว้ในไฟล์ index.html ซึ่งเป็นไฟล์หลักที่ถูกเรียกให้ทำงานเมื่อ app ของเราเริ่มรัน ดูไฟล์ index.html ดังรูป
 
 

 
 
ส่วนที่อ้างอิงเป็น selector ในไฟล์ app.component.ts 
 
<my-app>Loading AppComponent content here ...</my-app>
 

template property

ใช้สำหรับกำหนดรูปแบบการแสดงของ component โดยจะแสดงในรูปแบบ HTML tag
จากโค้ดตัวอย่างจะเป็นการแสดงข้อความคำว่า Hello ต่อด้วย Angular expression {{name}}
ไว้ใน <h1> tag ซึ่ง name จะเป็น property ของ component class ที่กำหนดในบรรทัด
 
export class AppComponent  { name = 'Angular'; }
 
ให้ name เท่ากับ 'Angular' เมื่อเริ่มทำงาน Angular จะแทน {{name}} ด้วยคำว่า 'Angular'
ซึ่งเป็นค่าของ name property ของ component 
 
แยกให้ดูชัดๆ
 
export class AppComponent  { 
  name = 'Angular'; 
}
 
รูปแสดงส่วนต่างๆ ของไฟล์ app.component.ts
 
 

 
 
ตัวอย่างผลลัพธ์
 
 

 
 
ทีนี้เรามาย้อนดูว่า component ไปแสดงในไฟล์ index.html ได้อย่างไร
สังเกตว่าในไฟล์ app.component.ts จะมีการ export AppComponent ซึ่งเป็น component class
จากนั้นในไฟล์ app.module.ts ได้ทำการ import และนำมากำหนดการใช้งาน 
 
 

 
 
โดยที่ไฟล์ app.module.ts ถูกเรียกใช้งานจากไฟล์ main.ts ตามที่ได้อธิบายไปแล้วในบทความก่อนหน้า 
 
 

 
 
และสุดท้ายไฟล์ index.html เรียกใช้ไฟล์ main.ts อีกที 
 
 

 
 
หมายเหตุ: การทำงานของ app จริงๆ จะทำงานผ่านไฟล์ JavaScript ที่เป็น นามสกุล js 
ไฟล์ ts จะใช้สำหรับเขียนโค้ดในรูปแบบ TypeScript ซึ่งจะถูก compile ก่อนเรียกใช้งาน แต่ทั้งนี้
ผู้เขียนจะใช้ชื่อไฟล์นามสกุล ts เพื่ออ้างอิง จึงขอทำความเข้าใจตรงนี้ไว้ก่อน ดังนั้น
ถ้าพูดว่า ไฟล์ index.html เรียกใช้ไฟล์ main.ts ก็หมายถึง จะเรียกใช้งานไฟล์ js ที่ compile จาก
ไฟล์ main.ts แบบนี้เป็นต้น
 
รายละเอียดของ component จะมีอีกมาก ทั้งนี้เราได้รู้จัก component เบื้องต้นเป็นแนวทางจาก
ไฟล์ตัวอย่างไปแล้ว รอติดตามบทความต่อไป
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ