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!

1. :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>

2. ::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;
}

3 :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 本组件内部. <h2>

: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!