angular - 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文件中调用。我们需要同时保留tscss和htmlts ，如上面的代码所示。

标签： angularionic-frameworkionic2ionic3

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

}