#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. Хотя я ценю ваши усилия, я думаю, вам следует еще раз прочитать вопрос