Question

我开始使用angular 5，我遇到了在component.ts中变量的标签样式之间绑定css的问题。

＆＃xA;＆＃xA;

所以这是我在component.ts中的代码：

＆＃xA;＆＃xA;

  export class AppComponent {＆＃xA ; style ='.p-color {color：red;}';＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

这是我的html代码：

＆＃XA;＆＃XA;

 <代码>＆LT;风格＆GT; {{样式}}＆LT; /风格＆GT;＆＃XA;

＆＃XA;＆＃ xA;

任何人都有任何想法如何解决它？

＆＃xA;

Answer 1

提前提出一个问题：为什么要这样做？我认为这不是实现目标的最佳方法。

Angular 4中还有其他几种方法可以应用样式：

类选择器

<p [class.color-red]="your-expression">Your text</p>

主机绑定

export class SongTrack {   
  //<host class="selected"></host>   
  @HostBinding('class.selected') selected = true;
  //<host style="color: red;"></host>     
  @HostBinding('style.color') color = 'red';
}

来源：https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635

直接设置样式

<h1 [style.color]="titleStyle ? 'green' : 'pink'">
  {{title}}
</h1>

希望有所帮助：）

Answer 2

创建文件html和css包含appcomponent

{{1}}

Answer 3

我需要做同样的事情，并且对我有用

在您的TS文件中：

import {ElementRef,Renderer2} from '@angular/core';

@Component({
   ...
})
export class Foo{

   @ViewChild('css') element:ElementRef;
   ngOnInit(){
     element.nativeElement.innerHTML = '<style type="text/css"> Your css goes here </style>';
   }
}

在您的模板上：

<div #css>//style will be bind here</div>

在Angular 5中的<style>标记之间绑定css

3 个答案: