Mengapakah innerHTML saya tidak menghormati gaya dalam Angular dan bagaimana saya boleh membetulkannya?

innerHTML Tidak Menghormati Gaya dalam Sudut

Dalam Sudut, menggunakan innerHTML untuk memaparkan HTML boleh menimbulkan isu penggayaan, terutamanya apabila cuba menggunakan CSS gaya dalam kod HTML. Tingkah laku ini berlaku kerana mod enkapsulasi lalai Angular (Diemulasikan) menghalang gaya luaran daripada mengganggu gaya dalaman komponen.

Penyelesaian:

Untuk menyelesaikan isu ini dan membolehkan penggayaan dalam innerHTML, anda perlu menukar mod enkapsulasi kepada Tiada. Ini membenarkan Angular menggunakan gaya daripada kedua-dua sumber dalaman dan luaran:

1. Import enum ViewEncapsulation daripada @angular/core.
2. Dalam komponen Angular anda, tetapkan sifat enkapsulasi kepada ViewEncapsulation. Tiada.
3. Tentukan gaya anda menggunakan sama ada gaya sebaris dalam templat komponen anda atau fail CSS/SCSS/LESS luaran. Angular akan menambahkannya secara automatik pada DOM.

Contoh:

<code class="typescript">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>';
  }
}</code>

Dengan pendekatan ini, anda kini boleh menggunakan gaya CSS pada HTML yang diberikan melalui innerHTML dalam apl Sudut anda.

Atas ialah kandungan terperinci Mengapakah innerHTML saya tidak menghormati gaya dalam Angular dan bagaimana saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!