将样式传递给组件的最佳方法

Question

所以我有一个称为InputEdit的组件（基本上是Label，单击该组件即可...很简单）并且此组件具有其自身的阴影DOM CSS样式。但是，当然，每个托管组件都希望为输入组件设置自己的字体大小和颜色...

那么最好的方法是什么？您可以只传入样式类并将整个CSS应用于组件吗？还是最好像下面这样手动传递每个值：

     <InputEdit [color]="'red'"/>

这似乎需要做很多工作，但是由于我们正在使用阴影或模拟DOM，因此我们不能仅从外部控制CSS。

我也知道您可以通过以下方式拼接阴影并定位直接元素：

/* styles.css */
UserInfo /deep/ InputEdit label {
    color: red;
    font-size: 1.1em;
}

基本上将允许您输入名为UserInfo / deep（任何级别）/自定义组件InputEdit的自定义组件，并使用红色标记目标标签...

但是再次，我想知道专门针对ng2的最佳方法是什么，例如将类配置传递到指令中？

Answer 1

我只需要在InputEdit上使用styles输入属性，然后传入具有所需样式的对象：

<InputEdit [styles]="stylesObj">                 // in host component's template

stylesObj = {font-size: '1.1em', color: 'red'};  // in host component class

<input [ngStyle]="stylesObj" ...>                // in InputEdit component's template

如果您要设置多个DOM元素，请传递一个更复杂的对象：

<InputEdit [styles]="stylesObj">

stylesObj = {
  input: {font-size: '1.1em', color: 'red'}
  label: { ... } 
};

<label [ngStyle]="styles.label" ...>
<input [ngStyle]="styles.input" ...>

Answer 2

Mark Rajcok's答案适用于一组样式，但是如果只允许更改字体大小和颜色，则可能要使用一种更直接的方法，例如： ，出于演示目的，也仅强制使用像素而不是更灵活的字符串）：

对于个人样式属性：

Component：<InputEdit [color]="'red'" [fontSize]="16">

component.ts：Input() color: string = 'black';Input() fontSize: number = 18;

component.template：<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

---

如果允许一组样式：

Component：<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}">注意：如果有多个单词，请确保CSS属性在字符串中为camelCased 或。

component.ts：@Input() styles: any = {};

component.template：<input type="text" [ngStyle]="styles">

Answer 3

更新

Answer 4

如果要让它留给组件来定义实际的CSS，则可以尝试以下操作之一：

为每个“逻辑”样式设置在组件上添加属性，例如headerSize。

Answer 5

另一个选择是使用CSS变量。在这种情况下，要设置子组件标签的颜色和字体大小的样式，可以在父组件的CSS上设置两个变量，然后在子CSS中使用它们。

userInfo.component.css