კომპონენტის შექმნა და კონფიგურაცია
კომპონენტის შექმნა და კონფიგურაცია
ფრეიმვორქის ერთ-ერთი უპირატესობა ის არის, რომ შეგვიძლია აპლიკაცია დავყოთ კომპონენტებად. ეს საშუალებას გვაძლევს, რომ აპლიკაციის განმეორებადი ელემენტები ერთ ადგილას განვსაზღვროთ და ბევრგან გამოვიყენოთ.
შენიშვნა: ამ თავში განვიხილავთ მე-17 ვერსიაში სტანდარტიზირებულ standalone კომპონენტებს. ანგულარის ძველ ვერსიებში გამოიყენებოდა მოდულებზე დაფუძნებული მიდგომა.
ანგულარის კომპონენტი ჩვეულებრივ სამ ფაილად დაყოფილი ფოლდერია. გვაქვს ts ფაილი, სადაც კომპონენტის კონფიგურაცია და ჯავასკრიპტის ლოგიკა ერთიანდება, html თემფლეითი, სადაც კომპონენტის მარკაპია და scss/css ფაილი, სადაც კომპონენტის სტილებია.
# example კომპონენტი
example.component.ts
example.component.html
example.component.css
ახალი კომპონენტის შემოტანა ასეთი ფაილების ხელით შექმნით შეიძლება, ან უბრალოდ CLI-ში ბრძანების გაშვებით:
ng generate component child
child იქნება ის სახელი, რომელსაც კომპონენტს დავარქმევთ.
ანგულარი შექმნის კომპონენტს, რომელიც განთავსდება child სახელის მქონე ფოლდერში.
ფაილების დასახელება მათი დანიშნულების მიხედვით ხდება. კონვენციურად წერტილებით
გამოიყოფა component
ფაილების დასახელებაში. html ფაილში ჩვენ ვწერთ მარკაპს.
ანგულარის CLI-იმ წინასწარ თემფლეითში ჩაგვისვა ტექსტი, რომელიც კომპონენტის სადმე
განთავსების შემთხვევაში უნდა გამოჩნდეს.
.css
ფაილში ვწერთ ამ კომპონენტის სტილებს, ხოლო .ts
ფაილში კომპონენტის ლოგიკას.
როგორ არის ეს ყველაფერი ერთმანეთთან დაკავშირებული?
ტაიპსკრიპტის ფაილში ვხედავთ, რომ დაესქპორტებულია კომპონენტის კლასი, რომელსაც
კონვენციურად სახელთან ერთად ეწერება სიტყვა 'Component', მაგრამ კლასის
დაექსპორტებამდე მას თან ახლავს @angular/core
-დან დაიმპორტებული @Component
დეკორატორი.
დეკორატორი ტაიპსკრიპტის
ხელსაწყოა, რომელიც მეტაპროგრამირებაში გამოიყენება. იგი ერთგვარი ფუნქციაა, რომელიც
მოდიფიკაციას უკეთებს მონაცემის სტრუქტურას - ამ შემთხვევაში კომპონენტის კლასს.
ამ დეკორატორში კონფიგურაციის ობიექტის მიწოდებით ანგულარი მუშა კომპონენტის ინსტანციას ქმნის.
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
@Component({
selector: "app-child",
standalone: true,
imports: [CommonModule],
templateUrl: "./child.component.html",
styleUrl: "./child.component.css",
})
export class ChildComponent {}
selector
არის ის თეგი, რომლითაც ამ კომპონენტს თემფლეითში განვათავსებთ.
კონვენციურად კომპონენტის თეგებს აქვთ app
პრეფიქსი, მაგრამ ეს შეიძლება იყოს
პროექტის დასახელება, კომპანიის სახელი, რომელიმე მათგანის აბრივიაცია და ა.შ.
სცადეთ app.component.html
-ში ამ თეგის განთავსება:
<!-- დამხურველი თეგით -->
<app-child></app-child>
<!-- შესაძლებელია void ტიპის თეგიც -->
<app-child />
თუ სადეველოპმენტო სერვერი გაშვებული გაქვთ, მაშინ ის მარკაპი უნდა დავინახოთ,
რომელიც child.component.html
-ში დავწერეთ.
კონფიგურაციაში standalone
თვისება მიუთითებს იმაზე, დამოუკიდებელია თუ არა კომპონენტი.
standalone
კომპონენტი დამოუკიდებლად ფუნქციონირებს იმ თვალსაზრისით, რომ ყველა dependency
(ანუ საჭირო კლასები) არის უშუალოდ ამ კომპონენტში დასაიმპორტებელი, თუკი მათი გამოყენება გვსურს.
ეს განსხვავდება მოდულზე დამოკიდებული კომპონენტებისგან, სადაც ცალკეულ ფაილში მოდულის კლასის დეკლარაცია
შეგვიძლია და იქ არსებული კომპონენტების გამოცხადება, ისევე როგორც მათთვის dependency-ების მიწოდება.
თუ ეს ყველაფერი ბუნდოვნად ჟღერს, არ ინერვიულოთ! დროთა განმავლობაში ყველაფერი გასაგები გახდება.
უბრალოდ გაითვალისწინეთ, რომ ანგულარის მე-17 ვერსიიდან სტანდარტული პრაქტიკაა standalone კომპონენტების გამოყენება.
imports
არის თვისება, სადაც ჩვენ შეგვიძლია შემოვიტანოთ ანგულარის სხვადასხვა საშენი ბლოკები
(კომპონენტები, დირექტივები, ფაიფები და ა.შ), რათა ისინი ამ კომპონენტში გამოვიყენოთ.
CommonModule
არის მოდული, სადაც ასეთი ყველაზე გამოყენებადი ბლოკებია, ამიტომ CLI-მ
ის წინასწარ დაგვიმატა.
კონფიგურაციაში templateUrl
მიუთითებს იმ მისამართზე, სადაც თემფლეითის ფაილი
უნდა იყოს. styleUrl
, შესაბამისად, მიუთითებს სტილების ფაილის მისამართზე.
აღსანიშნავია, რომ @Component
დეკორატორში templateUrl
-ის მაგივრად შეგვიძლია გამოვიყენოთ
template
და მარკაპი პირტაპირ ამ თვისების მნიშვნელობაში ჩავწეროთ, როგორც სტრინგი:
@Component({
selector: 'app-child',
standalone: true,
template: `<h1>Hello from ChildComponent!</h1>`,
styleUrl: "./child.component.css",
})
ასევე შეგვიძლია styles
თვისების გამოყენება styleUrl
-ის მაგივრად და სტრინგის მიწოდება,
სადაც ჩვენ მიერ არჩეული სტილების ფაილის სინტაქსი იმუშავებს:
@Component({
selector: 'app-child',
template: `<h1>Hello from ChildComponent!</h1>`,
styles:`
h1 {
color: red;
}
`,
})
@Component
-ში არსებულ კონფიგურაციას ანგულარის ქომფაილერი კითხულობს, და საჭირო ადგილას (სადაც კომპონენტის
თეგებს განვათავსებთ) DOM-ში ამ კომპონენტს ჩასვამს სათანადო ფუნქციონალით.
@Component
დეკორატორის დანიშნულება ამით არ ამოიწურება. მის შესახებ დეტალური ინფორმაციისთვის
გაეცანით ოფიციალურ დოკუმენტაციას.
სიცოცხლის ციკლი
აპლიკაციაში კომპონენტებს გააჩნიათ სიცოცხლის ციკლი. ისინი თავიანთი არსებობის განმავლობაში
კონკრეტულ ეტაპებს გადიან და ჩვენ შგევიძლია ამ ეტაპებში კონკრეტული ოპერაციების განხორციელება,
ეგრედ წოდებული lifecycle hook-ების დახმარებით.
ანგულარი ამის საშუალებას გვაძლევს კომპონენტის კლასში ინტერფეისების იმპლემენტაციით და ამ
ინტერფეისების მიხედვით კომპონენტში მეთოდების შექმნით. გავეცნოთ ორ ყველაზე გამოყენებად
ჰუკებს: ngOnInit
და ngOnDestroy
.
ngOnInit
ngOnInit
ეშვება, როცა კომპონენტი ინიციალიზირდება. AppComponent
-ის შემთხვევაში
ეს შეიძლება იყოს როცა მომხმარებელი აპლიკაციას გახსნის. სხვა კომპონენტების შემთხვევაში -
მაშინ, როცა აპლიკაცია მათ გამოაჩენს NgIf
დირექტივით ან რაუტერით (ამ კონცეფციებს მოგვიანებით
ვისწავლით).
ჩვენ შემოგვაქვს OnInit
ინტერფეისი angular/core
-დან და მას იმპლემენტაციას ვუკეთებთ.
import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
@Component({
selector: "app-root",
standalone: true,
imports: [CommonModule],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
ngOnInit(): void {
console.log("კომპონენტი ინიციალიზირებულია!");
}
}
ngOnDestroy
ngOnDestroy
მაშინ აქტიურდება, როცა კომპონენტი ნადგურდება. ეს შეიძლება მოხდეს მაშინ,
როცა აპლიკაცია გააქრობს კომპონენტს NgIf
დირექტივით ან რაუტერით, ან როცა აპლიკაცია
დაიხურება. ხშირად ამ ჰუკში ე.წ "მოსუფთავების ლოგიკას" ვწერთ, რათა ბრაუზერის მეხსიერება
გავწმინდოთ ზედმეტი მონაცემებისგან.
import { Component, OnDestroy, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
@Component({
selector: "app-root",
standalone: true,
imports: [CommonModule],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit, OnDestroy {
ngOnInit(): void {
console.log("კომპონენტი ინიციალიზირებულია!");
}
ngOnDestroy(): void {
console.log("აპლიკაცია განადგურდა!");
}
}
როგორც ხედავთ, ერთ კომპონენტში შეგვიძლია ერთზე მეტი ჰუკის იმპლემენტაცია. დროთა განმავლობაში ამ ჰუკებს პრაქტიკულ მაგალითებში ვნახავთ. ამ ეტაპზე უბრალოდ უნდა ვიცოდეთ ზოგადად რა არის მათი დანიშნულება.
ახლა ვნახოთ, როგორ მუშაობს მარტივი რეაქტიულობა ანგულარში!