Angular component คืออะไร?

Question

Accepted Answer

**component** คือบล็อกสร้างพื้นฐานของ Angular UI — TypeScript **class** ที่ตกแต่งด้วย `@Component` ที่ควบคุมส่วนหนึ่งของหน้าจอ ("view" ของมัน) ทุก Angular app เป็นต้นไม้ของ component ## Anatomy ของ component ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` ตัวตกแต่ง `@Component` เชื่อมโยงสามสิ่ง: **selector** (วิธีใช้ใน HTML), **template** (markup) และ **styles** (ขอบเขตเฉพาะ component นี้) ## Class ถือตรรมชาติและข้อมูล ```html

``` คุณสมบัติและวิธีการสาธารณะของ class สามารถเข้าถึงได้โดยตรงในแม่แบบของมันผ่านการผูกมัด — นี่คือแกนกลางของวิธี Angular เชื่อมโยงข้อมูลและมุมมอง ## การใช้ component ```html ``` ## Styles ถูกห่อหุ้มโดยค่าเริ่มต้น ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular ขอบเขต component styles โดยอัตโนมัติ (View Encapsulation) ดังนั้น CSS จึงไม่รั่วไหลระหว่าง component ## ทำไมจึงสำคัญ Components คือวิธีที่คุณจัดโครงสร้าง Angular app ทุกตัว — หน่วยอิสระของ template + logic + styles ขอบเขต ประกอบเข้ากับต้นไม้ ความเข้าใจตัวตกแต่ง `@Component` (selector, template, styles) และวิธีที่คุณสมบัติ/วิธีการของ class ผูกมัดกับ template คือรากฐานที่แน่นอนของการพัฒนา Angular ทุกอย่างอื่นสร้างขึ้นจากรูปแบบ component