css - 父级应该如何为 Angular 的子组件设置样式？我想要一个不会被弃用的好解决方案

Question

当我需要为新用途稍微更改组件时，我查看了嵌入和多槽嵌入与在组件周围添加 HTML 的对比，但仍然存在组件的内部样式需要更改的情况。

Answer 1

您可以将样式作为输入传入，然后使用 [ngStyle] 在模板中进行设置。

因此，对于一个简单的例子，我将展示如何使用背景颜色来做到这一点。

自定义组件.html

<div [ngStyle]="{'background-color': data?.backgroundColor }">
   <p> the background color will be set from an input </p>
</div>

自定义组件.ts

  @Input('data') 
  data: {
    backgroundColor: string;
  };

parent.html

<customComponent [data]="{backgroundColor: 'grey'}"></customComponent>