ما هي مكونات Angular؟

Question

IT Interview Practice · Accepted Answer

**المكون** (component) هو اللبنة الأساسية لواجهة المستخدم في Angular — وهو **class** من TypeScript مزين بـ `@Component` يتحكم في جزء من الشاشة ("عرضه"). كل تطبيق Angular عبارة عن شجرة من المكونات. ## تشريح المكون ```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** (الترميز)، و**styles** (مرتبطة بهذا المكون). ## يحتوي الـ class على المنطق والبيانات ```html

``` خصائص ومethods عامة في الـ class يمكن الوصول إليها مباشرة في template عبر binding — هذا هو جوهر كيفية ربط Angular للبيانات والعرض. ## استخدام المكون ```html ``` ## الأنماط مُغلفة بشكل افتراضي ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` يقوم Angular بتحديد نطاق أنماط المكون تلقائياً (View Encapsulation)، لذا لا ينسكب CSS بين المكونات. ## لماذا يهم المكونات هي كيفية بناء كل تطبيق Angular — وحدات مستقلة من template + منطق + أنماط مرتبطة، مكونة في شجرة. فهم مُزخرف `@Component` (selector، template، styles) وكيفية ربط خصائص/methods الـ class بـ template هو الأساس المطلق لتطوير Angular؛ كل شيء آخر يُبنى على نموذج المكون.

تشريح المكون

يحتوي الـ class على المنطق والبيانات

استخدام المكون

الأنماط مُغلفة بشكل افتراضي

لماذا يهم

أسئلة ذات صلة