将颜色动态添加到组件中答案

【问题标题】：Dynamically add colors into component将颜色动态添加到组件中
【发布时间】：2022-11-03 15:59:14
【问题描述】：

我有 2 个组件。第一个组件设置颜色，然后我在第二个组件中使用这些颜色，但是我必须单独设置我不想做的每种颜色。我正在尝试添加一个数组，我可以在其中添加颜色而不是添加单个颜色。

这是我的代码

组件 1 html

<div [ngClass]="{'brand-error-image-banner': data?.redImageBanner, 'graphite-grey-image-banner': data?.greyImageBanner, 'graphite-orange-image-banner': data?.orangeDarkImageBanner}</div>

组件 1 scss

.brand-error-image-banner {
    background-color: $brand-error;
    height: 164px;
    margin: -24px -24px 24px;
}

.graphite-grey-image-banner {
    background-color: $graphite-3;
    height: 164px;
    margin: -24px -24px 24px;
}

.graphite-orange-image-banner {
  background-color: $brand-orange-light;
  height: 164px;
  margin: -24px -24px 24px;
}

组件 1 模态

export class component1{
  public redImageBanner: boolean = false;
  public greyImageBanner: boolean  = false;
  public orangeDarkImageBanner: boolean  = false;


  constructor(args) {
    this.redImageBanner = args.redImageBanner;
    this.greyImageBanner = args.greyImageBanner;
    this.orangeDarkImageBanner = args.orangeDarkImageBanner;
  }
}

组件 2 html

<component1 [data]="{orangeDarkImageBanner: false, redImageBanner: true, greyImageBanner: false}"></component1>

所以基本上我不想单独添加每种颜色，例如。在上面的代码中，我添加了红色、灰色和橙色，如果我想添加新颜色，那么我必须创建一个新条目。例如，我怎样才能让它保持通用，然后添加这样的颜色？

<component1 [data]="{color: graphite-orange-image-banner}"></component1>

【问题讨论】：

使用内联样式=“背景颜色：$your_variable_color”
或使用泛型类和变量 bg 颜色在 component2 中设置作用域 scss-
@Medda86 in-line 不是一个选项，因为我仍然想使用模态。我正在尝试在模态中添加一个通用数组，我可以在其中指定第二个组件中的颜色并将其传递给该数据数组

标签： css angular scss-mixins

【解决方案1】：

您可以使用主机绑定.示例（try me）：

家长：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<hello [data]="{ color: selectedColor }"></hello>
  <label for="colors">I am parent color chooser:</label>
  <select name="colors" id="colors" [(ngModel)]="selectedColor">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="orange">orange</option>
  </select>`,
})
export class AppComponent {
  selectedColor = 'red';
}

孩子

import { Component, HostBinding, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>I am the child component!</h1>`,
})
export class HelloComponent {
  @HostBinding('style.color') // can also bind class names for example
  color: string;

  @Input()
  set data({ color }) {
    this.color = color; // you could map your strings to colors here
  }
}

【讨论】：