使用角度 8 设置自定义类

Question

我需要使用银行返回的背景颜色创建类，我如何使用 Angular 来做到这一点？我知道有办法做到这一点，也许使用@ViewChildren。

这些是我将在返回数据库时创建的类，我将在其中设置人员姓名和背景颜色，我需要在渲染组件时设置此 css。

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.eduard,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.eduard {
    background-color: rgba(0, 139, 139, 0.26);
}

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.alice,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.alice {
    background-color: #deecfc;
}

.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.roger,
.schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.roger {
    background-color: rgba(210, 105, 30, 0.39);
}

Answer 1

您可以使用Renderer2 创建一个style 标签元素，并且您可以从component 插入您的自定义css，最后您可以将该标签注入到您的文档正文中：

constructor(private renderer2: Renderer2) {
let myCss = `.schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.eduard,
                      .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.eduard {
                            background-color: rgba(0, 139, 139, 0.26);
                      }

                  .schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.alice,
                   .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.alice {
                          background-color: #deecfc;
                    }

                    .schedule-group-custom-work-days.e-schedule .e-month-view .e-work-days.roger,
                    .schedule-group-custom-work-days.e-schedule .e-vertical-view .e-work-hours.roger {
                        background-color: rgba(210, 105, 30, 0.39);
                    }`;

let styles = document.createElement('style');

styles.type = 'text/css';
styles.appendChild(document.createTextNode(myCss));
this.renderer2.appendChild(document.body, styles);

}