Question

简要说明：由于某些要求，ValueAxis { id:y_axis min: 0 max: 5 // on 5 it's proper, if i change it to 10 grids position is changing tickCount: 4 labelsVisible: false }代码用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都保留在ts中。

Answer 1

尝试以下代码，希望对您有所帮助。谢谢

参考链接：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>';
  }

}

Answer 2

使用封装：@Component中没有ViewEncapsulation.None 如下图

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>';
  }

}

CSS样式未生效

2 个答案: