:host, :host-context, ::ng-deep selector dari Angular

Artikel ini akan memberi Anda pemahaman mendalam tentang beberapa penyeleksi khusus di Angular: host, :host-context, ::ng-deep.

1. :host

:host berarti memilih komponen saat ini. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]

1.1 Pilih elemen host

Gunakan pemilih kelas semu :host untuk memilih elemen dalam宿主元素komponen宿主元素relatif terhadap elemen di dalam templat komponen).

Jika ada html berikut:

 <detail-aplikasi></detail-aplikasi>

Gaya komponen app-detail (gaya keseluruhan app-detail ) adalah sebagai berikut:

 :tuan rumah {
tampilan: blok sebaris;
latar belakang: merah;
}

Elements browser memilih elemen app-detail , dan Gayanya adalah sebagai berikut:

 [_nghost-wtd-c445] {
tampilan: blok sebaris;
warna latar: merah;
}

Dapat dilihat bahwa :host bertindak langsung pada宿主元素本身

1.2 Pilih elemen anak dari elemen host

Anda dapat menambahkan pemilih setelah :host untuk memilih子元素. Misalnya: :host h1 menempatkan tag h1 dalam tampilan komponen

 : tuan rumah h1 {
	warna: merah;
}

1.3 Pemilihan elemen host bersyarat

Ini hanya akan berlaku ketika host digunakan sebagai target dan memiliki kelas aktif.

 :host(.aktif){
	lebar batas: 3px;
}

Seperti ini:

 <aplikasi-detail kelas="aktif"></aplikasi-detail>

2. ::ng-deep

::ng-deep dapat mengabaikan hubungan hierarki bersarang dari classNames perantara. Temukan langsung className yang ingin Anda modifikasi.

Saat menggunakan beberapa komponen pihak ketiga, Anda perlu mengubah gaya komponen.

2.1 Dari elemen host ke elemen saat ini dan kemudian ke semua elemen anak h3 di DOM, termasuk elemen h3 menggunakan komponen pihak ketiga di komponen saat ini

 :host ::ng-dalam h3 {
gaya font: miring;
}

2.2 Mencari tipe tertentu di bawah tipe tertentu

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
tinggi: 120 piksel;
margin-atas: -16 piksel;
}

3. :host-context

Jika suatu kondisi tertentu perlu dipenuhi sebelum gaya dapat diterapkan. Ia mencari kelas CSS di simpul祖先宿主元素komponen saat ini, hingga simpul akar dokumen.如果ditemukan, gaya berikut akan diterapkan ke elemen internal本组件.

3.1 Pilih elemen dalam elemen host komponen

 :konteks host {
	warna: merah;
}

3.2 Ini hanya akan berlaku ketika host digunakan sebagai target dan memiliki kelas aktif.

Dalam contoh berikut, gaya background-color akan diterapkan ke semua elemen <h2>本组件内部hanya jika祖先元素(elemen host juga dapat digunakan) memiliki kelas CSS theme-light .

 :host-konteks(.tema-cahaya) h2 {
warna latar belakang: #eef;
}

3.3 Anda dapat menambahkan pemilih setelah :host-context untuk memilih sub-elemen

Misalnya: :host-context h1 menempatkan tag h1 di dalam tampilan komponen

 :konteks host h1{
warna: merah muda cerah;
}

3.4 Dapat digunakan untuk menilai kondisi internal suatu gaya tertentu

 jam1{
warna: merah muda cerah;

:host-konteks(.aktif) &{
warna: kuning;
}
}