父母应该如何为Angular设置子组件的样式？ 我想要一个不会被淘汰的好的解决方案

Question

当我需要为新用途而稍微更改组件时，我研究了转置和多插槽转置以及在组件周围添加HTML的情况，但是仍然有一些情况需要更改组件的内部样式。

Answer 1

Components should be self contained and programmed so they don't require refactoring whenever a new use is needed.

One solution is to add a class to the parent using ng-class, and then use regular css rules to style the child: one set of rules that requires the class to be on the parent div, and another set that doesn't require the class to be on the parent div.

Example css:

.my_class {Normal styling}
.my_parent_div_class .my_class {Special styling goes here}

Answer 2

You can pass a style in as an input, and then set it in the template with [ngStyle].

So for a simple example i'll show how to do this with a background color.

customComponent.html

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

customComponent.ts

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

parent.html

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