Bagaimanakah saya boleh menggayakan komponen kanak-kanak dalam Angular 4 menggunakan ::ng-deep?

Menggayakan Komponen Kanak-kanak dalam Sudut 4 dengan ::ng-deep

Menimpa sifat CSS daripada komponen induk kepada anak boleh menjadi tugas biasa dalam bersudut. Dalam Angular 4, anda boleh memanfaatkan pemilih ::ng-deep untuk mencapainya.

::ng-deep, dahulunya dikenali sebagai /deep/ dan kemudian >>> , ialah penggabung yang menusuk bayang-bayang yang membolehkan gaya mengalir ke elemen bersarang, walaupun ia terkandung dalam komponen kanak-kanak. Ini amat berguna apabila menyesuaikan penampilan elemen dalam komponen atau pustaka luaran.

Penggunaan

Untuk menggunakan ::ng-deep, hanya awalan ia pada pemilih CSS anda mahu gunakan pada elemen komponen kanak-kanak. Contohnya:

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}

Keserasian

Adalah penting untuk ambil perhatian bahawa ::ng-deep tidak disokong dalam Internet Explorer 11 (IE11). Ini kerana IE11 tidak menyokong penggabung bayang-piercing. Atas sebab ini, adalah disyorkan untuk menggunakan kaedah alternatif untuk menggayakan komponen kanak-kanak dalam IE11, seperti menggunakan bendera View Encapsulation atau mencipta modul Sudut yang mendedahkan gaya yang diingini.

Contoh

Pertimbangkan HTML berikut:

<code class="html"><div class="container">
  <app-child-component></app-child-component>
</div></code>

Dan CSS berikut:

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>

CSS ini akan menggunakan warna biru pada semua elemen dengan elemen anak kelas dalam app-child-component.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggayakan komponen kanak-kanak dalam Angular 4 menggunakan ::ng-deep?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!