时间戳

首页 > 解决方案 > 动态组件的 Angular/CSS 样式部分

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

问题描述

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

例如：

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

标签： cssangularng-style

解决方案

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

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>

推荐阅读