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

Question

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

例如：

<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 的背景应该为红色。

我可以在 individual 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 组件

在parent中：

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

child组件输入变量：

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

在child在htmldiv

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

并且在 child 组件的代码中

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

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

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

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

Angular/CSS Style parts of a component dynamically

css

ng-style

angular