动态组件的 Angular/CSS 样式部分

Posted 2023-02-23

【中文标题】动态组件的 Angular/CSS 样式部分

【英文标题】：Angular/CSS Style parts of a component dynamically

【发布时间】：2019-12-18 16:36:49

【问题描述】：

我有一个组件，它有不同的部分。但是，我希望能够为各个组件设置不同颜色的样式。

例如：

<div class="OuterBox">
    <div class="InnerBox1"></div>
    <div class="Seperator"></div>
    <div class="SecondBox">
        <div class="TextInfo"></div>
    </div>
</div>

我通过标准的 Angular 组件将它添加到页面：

<app-my-component></app-my-component>

我已经看到了 Angular 的 ngStyle 选项，我可以用它来指定，但我的问题是我不能简单地做一个 <app-my-component [styles]="backgroundColor: 'blue', 'font-size': '16px'">。我需要对不同的 div 部分进行不同的着色，例如 InnerBox1 的背景为绿色，而 SecondBox 的背景应为红色。

我可以在单个 CSS 上做这些样式，但是当我想让它成为一个通用组件时，我希望能够更改每个实例的颜色，因此它们可以不同于绿色和红色，并且可以是蓝色和橙色或其他。

【问题讨论】：

@Vega 不是真的。我的示例在这里非常基本，只是为了简单地说明问题，但我需要更多的控制，而不是简单的 CSS 层次结构。主要问题是，对于许多需要接受外部颜色来更改组件许多部分的样式的应用程序来说，这是一个通用组件，而不仅仅是我在演示示例中展示的几个简单的 div。

【参考方案1】：

您可以简单地为组件中的每种颜色声明一个变量并从外部绑定它们 在您的组件中：

import  Component, Input  from '@angular/core';
@Component(
  selector: 'app-my-component',
  template: `<div class="OuterBox" [ngStyle]="backgroundColor: outerBoxColor">
    <div class="InnerBox1"></div>
    <div class="Seperator"></div>
    <div class="SecondBox">
        <div class="TextInfo"></div>
    </div>
</div>`
)
export class MyComponent 
  @Input() outerBoxColor;

然后像这样从外部传递颜色：

<app-my-component [outerBoxColor]="'blue'"></app-my-component>
<app-my-component [outerBoxColor]="'red'"></app-my-component>

【讨论】：

有点。我的组件比我提供的简单示例要复杂得多。问题是，当它被调用时，我只想提供一个基本的前景色/背景色，但需要在很多地方使用它。我正在尝试构建一个组件供外部应用程序使用，因此调用内部函数可以工作，但我必须明确设置输入值才能得到我想要的。

@StevenScott，我不明白你想要做什么，但如果你只想重用该颜色，只需在任何你想要的地方做，例如在我的示例中更改 outerBoxColor 的名称到 backgroundColor 并在您需要的每个元素上写 [ngStyle]=" backgroundColor: backgroundColor " 。你可以对前景色做同样的事情

【参考方案2】：

或者，如果您想要的样式不仅仅是一个 css 选择器，您可以使用 DomSantizer 并将所有 css 样式传递给您的子组件

在父母中：

<child-component
  div1Style='width: 400px;background-color:red;'
  div2Style='width: 400px;background-color:red;'>
</child-component>

子组件输入变量：

@Input() div1Style: string;
@Input() div2Style: string;

在 html div 中的子元素中

 <div [style]='GetStyle(div1Style)' >
 <div [style]='GetStyle(div2Style)' >

在子组件的代码中

constructor(private sanitizer: DomSanitizer)    //to inject instance of this DomSantizer

GetStyle(c) 
if (isNullOrUndefined(c))  return c; 
return  this.sanitizer.bypassSecurityTrustStyle(c);

您可以根据需要声明任意数量的这些变量 - 例如，每个 div 一个

【讨论】：

有点。我的组件比我提供的简单示例要复杂得多。问题是，当它被调用时，我只想提供一个基本的前景色/背景色，但需要在很多地方使用它。我正在尝试构建一个供外部应用程序使用的组件，因此调用内部函数可以工作，但我必须明确设置输入值才能得到我想要的。这有助于指导我做我可能做的事情。

所以我认为您需要更明确地说明您想要做什么，因为这可以解决您帖子中的问题；) :ng-deep 等也可能是 Angular 8 之前为您提供的解决方案被释放并且对此的支持被放弃了。看这里***.com/questions/36527605/…