გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

რა არის encapsulation-ი Angular-ში

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

ანგულარის კომპონენტების გასტილვა styleUrls თვისებაში მითითებული CSS, SCSS ფაილების დახმარებით ხდება.

@Component() დეკორატორს როგორც იცით გადაეცემა მინიმუმ 3 თვისება, selector, templateUrl და styleUrls, როდესაც styleUrls-ში მითითებულ ფაილში ვაკეთებთ ცვლილებებს ეს სტილები ვრცელდება უშუალოდ ამ კონკრეტულ კომპონენტზე და არ ვრცელდება მის შვილ კომპონენტებში, ამას იწვევს კიდევ ერთი თვისება encapsulation, რომლის საწყისი მნიშვნელობაც არის encapsulation: ViewEncapsulation.Emulated.

იმისთვის, რომ კონკრეტულ კომპონენტში მითითებული სტილები გავრცელდეს გლობალურად მთელს დოკუმენტში აუცილებელია encapsulation თვისებას მივანიჭოთ ViewEncapsulation.None მნიშნველობა

encapsulation თვისებას შესაძლოა ქონდეს მესამე მნიშვნელობაც ViewEncapsulation.ShadowDom რაც გულისხმობს იმას, რომ მიუხედავად იმისა რა სტილები წერია გლობალურ style.scss ფაილში არ გავრცელდება ამ კონკრეტულ კომპონენტზე, ვინაიდან მას ექმნება მისთვის ცალკე უნიკალური DOM

მაგალითი:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  // encapsulation: ViewEncapsulation.Emulated
  // encapsulation: ViewEncapsulation.None
  // encapsulation: ViewEncapsulation.ShadowDom
})

ახალი კომპონენტის გენერაცია CLI-ის დახმარებით

ng g c component-name

კურსში შემავალი თემები

კომენტარები 1

Mate Kavelasvhili
11/08/2023, 07:27:50

მემგონი ენკაპსულაციის გამოყენებას ისევ ჩვეულეებრივ დაწერო გლობალურად ის სჯობს. თუარადა მერე შადოუს გამოიყენებ. ძაან მაინტერესებს ბუთსტრაპზე როგორ იქნება <3