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

Question

我已经创建了指令，但如何在其中添加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/核心(：

constructor(public el: ElementRef) {}

然后你可以这样使用它(例如背景颜色(：

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