时间戳

首页 > 解决方案 > 使用角度 8 设置自定义类

angular - 使用角度 8 设置自定义类

问题描述

我需要创建具有银行返回的背景颜色的类，如何使用 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);
}

标签： angulartypescriptsass

解决方案

您可以使用Renderer2来创建一个style标签元素，并且您可以从您的component.

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);

}

推荐阅读