Блог

Главная - Вопросы по программированию - Как мне интерполировать переменные JS в классы css?

Как мне интерполировать переменные JS в классы css?

#javascript #angular

#javascript #angular

Вопрос:

Итак, в 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 с интерполированными цветами.

Ответ №1:

Это не поддерживается в Angular2.

Используйте 

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

или любой из других вариантов ngClass предоставляет.

Комментарии:

1. То, что вы предлагаете, — это нечто совершенно другое. Я хочу создавать эти классы, а не использовать их

2. Вы также можете использовать ngStyle , но вы не можете использовать привязку в CSS, потому что это не поддерживается. Мы надеемся, что в конечном итоге они будут поддерживать переменные CSS.

3. Хм, я боялся, что это будет ответ. Думаю, мне придется пойти по пути старого доброго document.createElement

Ответ №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 }
        `
    ]
})

Комментарии:

1. И каким будет следующий шаг? Это не отвечает на вопрос в отношении angular2

2. Хотя я ценю ваши усилия, я думаю, вам следует еще раз прочитать вопрос