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

Menggayakan Komponen Anak daripada Ibu Bapa: Menggunakan ::ng-deep dalam Sudut

Pengenalan
Dalam Sudut 4, pembangun boleh menghadapi situasi di mana ia menjadi perlu untuk mengubah sifat CSS komponen anak daripada komponen induk. Ini memerlukan kaedah untuk menembusi sempadan DOM bayangan dan menyasarkan gaya yang diingini. Pemilih ::ng-deep menyediakan penyelesaian untuk cabaran ini.

Penggunaan ::ng-deep
::ng-deep ialah pemilih menusuk bayang-bayang yang membenarkan akses kepada gaya komponen kanak-kanak daripada komponen induk. Ia ialah alternatif semasa yang disyorkan kepada penggabung /deep/ yang tidak digunakan lagi dan ia berkongsi alias yang sama dengan >>>. Dengan menggunakan ::ng-deep, gaya yang digunakan dalam komponen induk boleh mengalir ke bawah dan menjejaskan komponen anak.

Contoh
Untuk menggambarkan penggunaan ::ng-deep, pertimbangkan kod berikut:

<code class="html"><div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent('DETAILS')"></div></code>

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

Dalam contoh ini, gaya yang digunakan pada kelas .overview menggunakan ::ng-deep akan digunakan pada elemen p dalam komponen anak .overview kelas. Kelas pseudo anak terakhir &:last-child akan mempengaruhi elemen p terakhir dalam komponen anak itu, mengalih keluar margin bawah lalai.

Sokongan IE11
Adalah penting untuk ambil perhatian bahawa :: ng-deep tidak disokong dalam IE11. Untuk penyemak imbas yang tidak menyokong ::ng-deep, kaedah alternatif seperti ViewEncapsulation.None dan enkapsulasi: "tiada" dalam projek Angular CLI boleh diterokai untuk mencapai fungsi yang serupa.

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