Question

所以在ng1中，我可以做到以下几点：

angular.module('foo').component('foo', {
template:
    `<style type="text/css">
        .branding-color {
            color: {{ $ctrl.brandingColor }} !important;
        }

        .branding-color-after:after {
            background-color: {{ $ctrl.brandingColor }} !important;
        }

        .branding-color-before:before {
            background-color: {{ $ctrl.brandingColor }} !important;
        }

        .branding-color-border-before:before {
            border-color: {{ $ctrl.brandingColor }} !important;
        }

        .branding-color-bg {
            background-color: {{ $ctrl.brandingColor }};
        }

        button.button-primary, span.button-primary, a.button-primary, div.button-primary, .button-primary {
            background-color: {{ $ctrl.brandingColor }};
        }

        .button-primary.ty-sticky:enabled {
            border: 1px solid {{ $ctrl.brandingColor }} !important;
        }
    </style>`,
controller(API) {
    const defaultBrandingColor = 'white';

    API.Foobar.getStuff().then((response) => {
        this.brandingColor = _.get(response.data, 'brandingColor', defaultBrandingColor); // return a hex code
    });
},
});

我试图模仿相同的行为，但无法使其发挥作用。我尝试在组件模板中使用标记并使用组件的样式元数据，但在这两种情况下，ng2都不会插入我的brandingColor。

知道如何解决这个问题吗？或者，我很乐意接受任何其他允许我提供带插值颜色的全局css类的解决方案。

Answer 1

Angular2不支持。

使用

[ngClass]="{'class1': boolValue1, 'class2': boolValue2 }"

或ngClass提供的任何其他变体。

Answer 2

如果你使用``你可以传播这样的变量

let var = "#000000";
var css = `body { background: ${var} }`

CSS可以通过这种方式传递给Component

@Component({
    templateUrl: './login.component.html',
    styles: [
        `
            .grid { height: 90vh }
            .column { max-width: 450px }
            .form { text-align: left }
        `
    ]
})

如何将JS变量插入到css类中？

2 个答案: