კურსის დასრულების შემდეგ შეძლებთ 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
})
ng g c component-name
კომენტარები 1
Mate Kavelasvhili
მემგონი ენკაპსულაციის გამოყენებას ისევ ჩვეულეებრივ დაწერო გლობალურად ის სჯობს. თუარადა მერე შადოუს გამოიყენებ. ძაან მაინტერესებს ბუთსტრაპზე როგორ იქნება <3