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

}

用角度8设置自定义类

1 个答案: