Css 如何根据@Input中的参数动态设置：host元素的样式？

通常，我可以使用：host伪样式（如下所示）设置组件根的样式

:host{ border: 1px solid gold; }

但是，如果应该根据传递给@Input的参数动态设置上述样式，我该如何处理呢

目前我唯一能想到的方法就是添加一个辅助DIV，并将其样式设置为这样

<div [ngClass]="styleMeDynamically"> ... </div>

。。。

有没有一种方法可以直接在主机上动态应用样式而不使用注入的DIV

我已经发现了，但它需要显式地声明类并将它们连接到单独的输入。我想获得一个传入参数的配置对象，并使用[ngClass]绑定样式以实现完全的灵活性。

您可以做的是

创建接受样式对象的自定义指令。在该指令中，可以获取主体元素的引用并修改其样式

这是一个

这里有一个快速的解释

创建一个将接受样式对象的指令

import {Directive,TemplateRef,ElementRef,OnChanges,SimpleChanges,OnInit,Renderer2,DoCheck,Input} from "@angular/core";

@Directive({
  selector: "[appSetStyle]"
})
export class SetStyleDirective implements OnInit, OnChanges {
  @Input() appSetStyle: { [key: string]: any } = {};
  constructor(private elementRef: ElementRef<HTMLElement>) {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    this.applyStyles();
  }

  applyStyles(): void {
    if (this.appSetStyle) {
      for (const key in this.appSetStyle) {
        this.elementRef.nativeElement.style[key] = this.appSetStyle[key];
      }
    }
  }
}

import{Directive，TemplateRef，ElementRef，OnChanges，SimpleChanges，OnInit，Renderer2，DoCheck，Input}来自“@angular/core”；
@指示({
选择器：“[appSetStyle]”
})
导出类SetStyleDirective实现OnInit、OnChanges{
@Input（）appSetStyle:{[key:string]：any}={}；
构造函数（私有elementRef:elementRef）{}
ngOnInit（）：void{}
ngOnChanges（更改：SimpleChanges）：无效{
这是applyStyles（）；
}
applyStyles（）：void{
if（this.appSetStyle）{
for（此.appSetStyle中的常量键）{
this.elementRef.nativeElement.style[key]=this.appSetStyle[key]；
}
}
}
}

将该样式对象与项目中的任何html元素或任何其他组件一起使用

<app-header [appSetStyle]="dynamicStyles"></app-header>

如果不想生成指令，则可以将

ElementRef

插入要设置样式的组件内部

ElementRef是获取主机引用所需的

我希望这会有所帮助

也许装饰师可以帮你。它允许绑定任何主机属性，包括

类

和

样式

。例如：

@组件（{…}）
导出类MyComponent{
//可以有条件地将类添加到宿主元素
@输入（）
@主机绑定（'class.large'）
大=假；
//也可以绑定样式
@输入（）
@主机绑定（'style.border.px'）
边界宽度=1；
@输入（）
绿色=假；
//你可以用吸气剂
@主机绑定（'style.border color'）
获取borderColorStyle（）{
还这个。绿色？‘绿色’：‘黑色’；
}
}

由于angular 9甚至可以绑定CSS变量，请参阅9版本中改进的CSS类和样式绑定部分

hi

您认为它与其他答案相比如何？我觉得有点过分了。另一方面，它似乎更狭隘。你认为呢？@KonradViltersten如果是指令解决方案，你应该从组件父级传递所有样式，就封装而言，这不是一个好的解决方案。子组件应该提供一个允许设置其外观的接口，但不应该询问整个样式。对于@HostBinding解决方案，组件只要求样式的参数，但不会向父级公开整个样式。@KonradViltersten只是，有多种方法可以实现相同的行为。这取决于你选择一个最适合你的要求。如果不想创建指令，也可以在组件中插入

ElementRef

。我在回答中也提到过。@HirenParekh是的，你提到过。任何答案都没有错。虽然我同意你的观点，应该选择最适合我的要求的方法，但障碍是我不确定如何判断这些方法是否足够。因此，我问。

<div [style.--main-border-color]=" '#CCC' ">
  <p style="border: 1px solid var(--main-border-color)">hi</p>
</div>