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

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" ...>