如何在Angular 6中动态渲染组件并应用动态CSS

Question

我创建了Directive，但是如何在其中添加CSS样式。 此外，尝试使用数组对象，但已在html中应用了CSS，但我想创建单个组件，并在其中传递宽度，高度，边框，文本等属性以动态呈现组件，如果要创建更多组件，则只能在其中进行更新单一组件文件。

Answer 1

要动态添加样式，在角度上可能是一件棘手的事情。不能将任何变量添加到stiles = ""标记中，相反，您必须使用类似的

<div [style.background]="variableWithColor"> </div>

或

<div [style.color]="variableWithColor"> </div>

有关此信息：https://angular.io/guide/template-syntax#style-binding

如果要通过您创建的指令执行此操作，则将需要以下内容：在指令中导入和注入ElementRef（来自@ angular / core）：

constructor(public el: ElementRef) {}

然后您可以通过这种方式使用它（例如，使用背景色）：

ngOnInit() {
    this.el.nativeElement.style.backgroundColor = 'red';
  }