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

Question

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

例如：

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

Answer 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>

Answer 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 一个