通过属性指令将CSS样式传递给子HTML元素

我试图向子组件发送一个样式列表，并通过属性指令传递。 例如：

<div [mystyles]>
   <p>.....</p>
   <div>...</div>
</div>

...

---

通过属性指令，我可以修改我正在使用的父div的css。但是希望[mystyles]修改其子元素p和div。

您可以在子组件中使用ngStyle指令

在父组件中，您可以（通过@input指令）将您想要的样式传递给子组件，然后子组件可以在html中使用它

这里是一个示例实现

Parent.ts

myStyles = {
   'background-color': 'blue',
}

@Input() parentStyle: any;

Parent.html

<child-component-selector [parentStyle] = myStyles>

<p [ngStyle]="parentStyle">
   ...
</p>

Child.html

<child-component-selector [parentStyle] = myStyles>

<p [ngStyle]="parentStyle">
   ...
</p>

然后以这种方式使用子元素中的类：

myClasses = {
  "class-name-1": {
    "background-color": "blue"
  },
  "class-name-2": {
    "background-color": "yellow"
  },
  "class-name-3": {
    "background-color": "lime"
  }
}

<p [ngStyle]="parentStyle.class-name-1">
   ...
</p>
<div [ngStyle]="parentStyle.class-name-2">
   ...
</div>

...

...

（parentStyle变量具有您在@Input（）指令后指定的名称，如上例所示）

---

正如您所看到的，传递几个类只需要一个输入，这只取决于传递给子元素的输入变量。

如果我想使用单个指令将多个css类传递给不同的子元素，该怎么办？这取决于您想要实现的结果，myStyle可以是一个对象数组，也可以是一个包含所有所需类的更复杂的对象。您可以在父组件中组合复杂对象，然后在子组件中拆分它，然后在子html中使用检索到的类。您可以在@Input指令中传递任何类型的数据。每个孩子都有自己的输入，因此您可以将相同的myStyle传递给几个孩子。但是我需要您提供关于项目的更多信息如果您需要更深入的回答，我需要将样式传递给子组件的各个HTML元素（如span标记或div标记）。我希望在不获取每个类的输入的情况下执行此操作，因为我在其他几个场景中使用子组件。我需要将需要在单个指令中传递的类捆绑起来，就像MyClass将具有多个子组件类HTML一样