Стиль CSS не вступает в силу

Question

Краткое пояснение: Из-за некоторых требований код HTML записывается в home.ts и загружается в home.html. CSS стиль написан в home.ts компоненте стиля.

Проблема: стиль CSS не применяется в коде HTML.

home.ts code:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:[`.p-tag{font-size:20px; color:red;}`]
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}

home.html code:

<ion-content>
    <div [innerHtml]="code2 | noSanitize"></div>
</ion-content>

По некоторым причинам мы не можем вызвать css из .scss файла. Нам нужно хранить и css, и html в тс, как показано в коде выше.

Answer 1

Использовать инкапсуляцию: ViewEncapsulation.None в @Component Вроде как ниже

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


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:['home.css'],
  encapsulation: ViewEncapsulation.None
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}

Answer 2

Попробуйте приведенный ниже код, надеюсь, он вам поможет. Спасибо

Ссылка: https://angular.io/guide/component-styles

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:['.p-tag{font-size:20px; color:red;}']
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}