Açısal 9 serisi (VII) CSS tarzı dürbün

Küçük · Yayınlandı 17.06.2020 16:46:59

Angular 9 Serisi (1) Dinamik Yüklü Bileşenler
https://www.itsvse.com/thread-9238-1-1.html

Açısal 9 serisi (2) dinamik bileşen iletim parametreleri
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 serisi (3) dinamik bileşen olaylarına abone olur
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Serisi (IV) Özel Boru Hatları
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Serisi (V), miktar para birimi formatını biçimlendirir
https://www.itsvse.com/thread-9249-1-1.html

Açısal 9 serisi (VI) yerel JS değişkenlerini ve yöntemlerini çağırır
https://www.itsvse.com/thread-9254-1-1.html

Geriye dönüp baktığımızda, tanıtılan üçüncü parti bileşenin tarzını değiştirmeye çalıştık ama başarılı olmadı.

Açısal ayar bileşeni CSS stili çözüm etmiyor
https://www.itsvse.com/thread-9184-1-1.html

:host, mevcut bileşeni seçen bir seçiciyi temsil eder.
::ng-deep, ara sınıfName'in iç içe hiyerarşi ilişkilerini görmezden gelebilir. Değiştirmek istediğiniz className'i doğrudan bulun.
Ancak resmi belgeler, ng-deep'in gelecekteki sürümlerde terk edileceğini söylüyor ve gelecekte ne tür bir sözdizimi olacağı bilinmiyor.

Bileşenin üstündeki özellik, mevcut bileşenin css stil sayfasını ayarlamak için styleUrls olarak ayarlanabilir.

Tanıtılan stil sayfası yalnızca mevcut etiket öğesini etkiler ve diğer bileşenleri etkilemez; bu da Angular çerçevesinin önemli bir özelliğidir.

CSS Kodu:

Giriş görünür.

Aşağıda gösterildiği gibi tarayıcı üzerinden oluşturulan son CSS stiline bakalım:

.itsvse1[_ngcontent-serverApp-c228] {
arka plan rengi: mavi;
}

[_nghost-serverApp-c228] .itsvse2 {
arka plan rengi: yeşil;
}

[_nghost-serverApp-c228] .itsvse3 {
arka plan rengi: kırmızı;
}

.itsvse4 {
arka plan rengi: aqua;
}

.itsvse1 yalnızca mevcut bileşeni stilize eder, .itsvse2 ve .itsvse3 tanıtılan alt bileşenlerin stilini etkiler, .itsvse3 ise global stili etkiler.

itsvse1 css yalnızca mevcut bileşeni etkileyebilir çünkü tüm mevcut düğüm öğeleri "_ngcontent-serverapp-c228" özniteliğini ekler, aşağıdaki şekilde gösterilmiştir:

(Son)

Küçük · Yayınlandı 26.11.2021 17:07:00

Açısal kapsülasyonu kullanmanın üç yolu
https://www.itsvse.com/thread-9200-1-1.html

Giriş görünür.

[Angular] Açısal 9 serisi (VII) CSS tarzı dürbün

İlgili Yazılar

Görüntülenen bölümler