Mengapa Gaya Tidak Digunakan pada InnerHTML dalam 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>';
  }
}

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!