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

Posted 2023-02-22

【中文标题】通过属性指令将 CSS 样式传递给子 HTML 元素

【英文标题】：Passing CSS Styles to child HTML elements through Attribute Directives

【发布时间】：2019-07-20 19:04:46

【问题描述】：

我正在尝试通过属性指令向子组件发送样式列表。 例如：

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

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

【参考方案1】：

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

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

这里是一个示例实现。

Parent.ts

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

Parent.html

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

Child.ts

@Input() parentStyle: any;

Child.html

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

Here ngStyle 使用小指南

编辑：

您可以通过这种方式在父级中编写替换 myStyles 的 myClasses 变量：

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 var 具有您在 @Input() 指令后指定的名称，如上例所示）

正如您所见，传递多个类只需要一个输入，它仅取决于您传递给子级的输入变量。

【讨论】：

如果我想使用单个指令将多个 css 类传递给不同的子元素怎么办？

这取决于你想要达到什么结果，myStyle 可以是一个对象数组，也可以是一个包含你需要的所有类的更复杂的对象。您可以在父组件中组合复杂对象，然后将其拆分为子组件，然后在子 html 中使用检索到的类。您可以在 @Input 指令中传递任何类型的数据。

每个孩子都有自己的输入，因此您可以将相同的 myStyle 传递给多个孩子。但是，如果您需要更深入的答案，我需要您提供有关您项目的更多信息，

我需要将样式传递给子组件的各个 HTML 元素（如 span 标签或 div 标签）。我想在不为每个类获取输入的情况下执行此操作，因为我将子组件用于其他几个场景。我需要捆绑需要在单个指令中传递的类，例如 其中 myclasses 将有多个子组件类 HTML