Angular自定义组件样式输入属性传值的正确实现方案

Angular模板的属性传值分两种规则，你之前的写法踩了最基础的规则坑：

• 不带方括号写styles="xxx"时，等号后面的内容会被直接当做静态字符串处理，不会做JS对象求值，所以你传入的内容实际是"{root:{'background': 'crimson'}}"这段字符串，和你定义的ComponentCSS类型不匹配，自然会抛类型错误。
• 只有加方括号写成[styles]="xxx"时，等号后的内容才会被当做模板表达式，按TS/JS语法求值后传入组件。

如果要沿用你当前定义的styles输入属性，只需要改成属性绑定写法即可：

简单场景直接内联传值 #

样式配置项少的时候可以直接在模板里写对象：

<app-component [styles]="{root:{'background': 'crimson'}}"></app-component>

复杂场景预定义样式对象 #

如果要配置的样式项多，不要把大段对象写在模板里，先在父组件TS侧定义好类型匹配的对象，模板直接绑定变量：

// 父组件ts文件
customStyles: ComponentCSS = {
  root: { background: 'crimson', padding: '12px', borderRadius: '4px' },
  icon: { fontSize: '20px', color: '#fff' }
}

<!-- 父组件模板 -->
<app-component [styles]="customStyles"></app-component>

组件内部模板只需要用内置的ngStyle指令把传入的样式对象绑定到对应节点上就行：

<!-- app-component 自身模板 -->
<div class="comp-root" [ngStyle]="styles.root">
  <span class="comp-icon" [ngStyle]="styles.icon"></span>
  <ng-content></ng-content>
</div>

传JS样式对象的方式虽然能跑，但在组件库场景下不算最优解，Angular原生支持的CSS自定义属性（CSS变量）方案灵活度更高、性能更好，也是目前主流组件库通用的实现方式，不需要额外定义输入属性：

1. 先在组件自身的样式文件里，给需要支持自定义的节点用CSS变量预留配置位，同时设置好默认样式：

/* app-component 自身样式 */
:host {
  background: var(--comp-root-bg, #fff);
  padding: var(--comp-root-padding, 8px);
  border-radius: var(--comp-root-radius, 4px);
}
.comp-icon {
  font-size: var(--comp-icon-size, 16px);
  color: var(--comp-icon-color, #333);
}

2. 业务方使用组件时，不需要传任何Input属性，直接写普通CSS给对应变量赋值即可，原生支持媒体查询、伪类、样式优先级、动态切换等所有CSS能力：

/* 业务方样式 */
app-component {
  --comp-root-bg: crimson;
  --comp-icon-size: 20px;
  --comp-icon-color: #fff;
}
/* 可以直接配合响应式规则写 */
@media (max-width: 768px) {
  app-component {
    --comp-root-padding: 6px;
    --comp-icon-size: 16px;
  }
}

简单场景也可以直接写在内联样式里：

<app-component style="--comp-root-bg: crimson"></app-component>

相比传JS对象的方案，这种方式的优势很明显：

• 不需要做对象监听、变更检测，性能更好
• 完全复用CSS原生能力，灵活度远高于JS对象配置
• 业务方学习成本低，和写普通CSS的逻辑一致，不需要记忆组件Input的结构
• 基于Web标准实现，没有框架绑定，后续跨框架迁移成本极低

内容的提问来源于stack exchange，提问作者Christoffer