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

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

我只想styles在InputEdit上使用input属性,并传入一个具有所需样式的对象:

<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）的答案对于一组样式来说是不错的选择，但是如果您只允许更改字体大小和颜色，则可能要使用一种更直接的方法（在本例中，也是仅用于像素，而不是用于演示目的的更灵活的字符串）：

对于个人风格：

零件：
<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">

如果允许一组样式：

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

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

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

Answer 3

更新

::slotted 现在所有新浏览器都支持它,并且可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

原版的

/deep/,::shadow并且>>>已弃用. ::ng-deep是最好的选择,直到所有浏览器都正确支持样式封装并且ViewEncapsulation.Emulated可以删除.

弃用仅适用于Chrome中的本机实现(其他浏览器从未实现过),但Angular在ViewEncapsulation.Emulated(默认)中有自己的这些CSS组合器仿真

/deep/,::shadow并>>>::ng-deep因此可用于在Angular2就好了.

对于简单的类或样式属性设置,请使用ngStyle Angular 2.0和ng-style