გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

რა არის 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

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

🔗 SCSS🔗 typescript🔗 Angular🔗 git

დამატებითი რესურსები

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით