动态添加颜色到组件中

Question

我有两个部件。第一个组件设置我在第二个组件中使用的颜色，但是我必须单独设置每个颜色，这是我不想做的。我试图添加一个数组，我可以在里面添加颜色，而不是添加单个颜色。

这是我的密码

构成部分1 html

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

构成部分1

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

Answer 1

您可以使用HostBinding。示例(试试看)：

父级：

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