Rumah > hujung hadapan web > tutorial css > Mengapa Gaya Tidak Digunakan pada InnerHTML dalam Angular?

Mengapa Gaya Tidak Digunakan pada InnerHTML dalam Angular?

Barbara Streisand
Lepaskan: 2024-10-27 14:35:02
asal
933 orang telah melayarinya

Why Are Styles Not Applied to InnerHTML in Angular?

Gaya Tidak Berfungsi untuk innerHTML dalam Sudut

Pernyataan Masalah:

Apabila menghantar kod HTML sebagai innerHTML ke paparan, gaya yang ditakrifkan dalam kod tidak digunakan. Jika kod HTML tidak termasuk sebarang gaya sebaris, ia dipaparkan dengan betul. Walau bagaimanapun, apabila gaya sebaris, seperti warna latar belakang, ditambahkan pada kod HTML, ia diabaikan.

Punca Punca:

Tingkah laku ini adalah hasil daripada Enkapsulasi komponen lalai Angular ditetapkan kepada "Diemulasikan." Enkapsulasi yang ditiru menghalang gaya CSS daripada mempengaruhi elemen di dalam dan di luar komponen.

Penyelesaian:

Untuk membolehkan gaya yang ditakrifkan dalam innerHTML digunakan, pengkapsulan komponen mesti ditukar kepada "Tiada". Ini boleh dicapai dengan menambahkan kod tambahan berikut pada apl:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}
Salin selepas log masuk

Dengan enkapsulasi ditetapkan kepada "Tiada", gaya yang ditakrifkan dalam innerHTML akan ditambahkan pada DOM secara automatik, membolehkannya digunakan pada elemen yang dicipta oleh kod HTML.

Atas ialah kandungan terperinci Mengapa Gaya Tidak Digunakan pada InnerHTML dalam Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan