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

ანგულარის კომპონენტების გასტილვა 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