რა არის Angular კომპონენტი?

Question

Accepted Answer

**კომპონენტი** არის Angular UI-ის ფუნდამენტური მშენებელი ბლოკი — 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**-ი (ამ კომპონენტისთვის დაზღვეული). ## კლასი ან ის მდგომარეობა და მონაცემები ```html

``` კლასის საზოგადო თვისებები და მეთოდები პირდაპირ ხელმისაწვდომი არის მის 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 + logic + scoped styles-ის თვითკმარი ერთეულები, რომელიც დალაგებულია ხეში. `@Component` დეკორატორის გაგება (selector, template, styles) და როგორ ხდება კლასის თვისებების/მეთოდების binding template-ში არის Angular განვითარების აბსოლუტური საფუძველი; ყველაფერი სხვა აშენებულია კომპონენტის მოდელზე.