Rumah > Artikel > hujung hadapan web > Angular's :host, :host-context, ::ng-deep selectors
Artikel ini akan memberi anda pemahaman yang mendalam tentang beberapa pemilih khas dalam sudut: hos, :host-context, ::ng-deep, saya harap ia akan membantu anda!
:host
:hos bermaksud memilih komponen semasa. [Cadangan tutorial berkaitan: "tutorial sudut"]
1.1 Pilih elemen hos
Gunakan :host
Pemilih kelas pseudo, digunakan untuk memilih elemen dalam komponen 宿主元素
(berbanding dengan elemen di dalam templat komponen, ia bersamaan dengan memilih keseluruhan 宿主元素
).
Jika terdapat html berikut:
<app-detail></app-detail>
Gaya komponen app-detail
(gaya keseluruhan app-detail
) adalah seperti berikut:
:host { display: inline-block; background: red; }
PelayarElements
Pilih elemen app-detail
, Gaya adalah seperti berikut:
[_nghost-wtd-c445] { display: inline-block; background-color: red; }
Seperti yang anda lihat, :host
bertindak secara langsung pada 宿主元素本身
1.2 Pilih anak elemen hos Elemen
boleh menambah pemilih selepas :host
untuk memilih 子元素
. Contohnya: :host h1
Letakkan teg h1
dalam paparan komponen
:host h1 { color:red; }
1.3 Bersyarat pilih elemen hos
untuk hos Sebagai sasaran, ia hanya akan berkuat kuasa apabila ia mempunyai kelas aktif
:host(.active){ border-width: 3px; }
seperti ini:
<app-detail class="active"></app-detail>
::ng-deep
::ng-deep boleh mengabaikan perhubungan hierarki bersarang bagi nama kelas perantaraan. Cari nama kelas yang anda mahu ubah suai.
Apabila menggunakan beberapa komponen pihak ketiga, anda perlu mengubah suai gaya komponen Dalam kes ini, gunakan.
2.1 Daripada elemen hos. ke elemen semasa Kemudian pergi ke semua elemen h3 kanak-kanak dalam DOM, termasuk elemen h3 menggunakan komponen pihak ketiga dalam komponen semasa
:host ::ng-deep h3 { font-style: italic; }
2.2 Carian untuk jenis tertentu di bawah jenis tertentu
.card-container ::ng-deep .ant-tabs-card .ant-tabs-content { height: 120px; margin-top: -16px; }
:host-context
Jika syarat tertentu perlu. dipenuhi sebelum gaya boleh digunakan. Ia mencari kelas CSS dalam
宿主元素
nod komponen semasa, sehingga nod akar dokumen. Jika祖先
ditemui, gaya berikut akan digunakan pada如果
elemen dalaman.本组件
3.1 Pilih elemen dalam elemen hos komponen
:host-context { color:red; }
3.2 Sasarkan hos, Ia hanya akan berkuat kuasa jika terdapat kelas aktif pada masa yang sama
Dalam contoh berikut, hanya apabila tertentu (elemen hos juga boleh digunakan) mempunyai kelas CSS 祖先元素
, gaya theme-light
akan digunakan pada semua background-color
elemen 本组件内部
. c1a436a314ed609750bd7c7d319db4da
:host-context(.theme-light) h2 { background-color: #eef; }
3.3 Anda boleh menambah pemilih selepas :host-context untuk memilih sub-elemen
Contohnya: Kedudukan paparan komponen Teg :host-context h1
di dalam h1
:host-context h1{ color: hotpink; }
3.4 boleh digunakan untuk menilai keadaan dalaman gaya tertentu
h1{ color: hotpink; :host-context(.active) &{ color: yellow; } }Lebih banyak pengetahuan berkaitan pengaturcaraan , sila layari:
Pengajaran Pengaturcaraan! !
Atas ialah kandungan terperinci Angular's :host, :host-context, ::ng-deep selectors. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!