Ionic - пользовательские цвета из файла SASS в ngStyle
В моем проекте Ionic, в моем src/theme/variables.scss, ниже группы $colors, у меня есть еще одна группа цветов $buttonColors, которая выглядит так:
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
$buttonColors: (
sampleRed: #A92A0E,
sampleBlue: #162C60
);
В моем файле .css я могу использовать вторую группу цветов следующим образом:
.element {
color: color($buttonColors, sampleRed, base);
}
Но если я захочу использовать приведенный выше код в [ngStyle] = "{'color' : 'color($buttonColors, sampleRed, base)'}" - это не сработает.
И в моем случае я хочу использовать этот цвет именно в ngStyle. Как я могу правильно указать этот цвет в ngStyle?
@dAxx_ Я заметил, что тема, которую вы мне прислали, касалась файла .ts. Однако я хочу получить доступ к этой переменной в моем файле .html в [ngStyle] элемента. Это тоже невозможно?
Как уже упоминалось, вы не можете получить доступ к переменным sass после компиляции приложения. Поскольку [ngStyle] является динамическим, он будет пытаться получить переменные ПОСЛЕ компиляции приложения. вы можете жестко закодировать значение прямо в шаблоне или создать ссылку в своем машинописном тексте и использовать ее.
См. Эту проблему в репозитории Angular [github.com/angular/angular-cli/issues/1253], одно из решений - использовать sass-vars-loader (github.com/epegzz/sass-vars-loader) для компиляции sass в TS, а затем включить его в компонент. Кажется немного запутанным, но если вам действительно нужна эта функция, это может быть решением.
Ответы 1
В файле компонента:
import {Sanitizer} from '@angular/core';
export class MyCass {
sanitizer: Sanitizer;
myColor = '#444444';
constructor(_sanitizer: Sanitizer) {
this.sanitizer = _sanitizer;
}
В файле Html:
<ion-title [attr.style] = "sanitizer.bypassSecurityTrustStyle('--color: ' + myColor)"></ion-title>
У меня это сработало. Но вы должны использовать ионные 4 переменные CSS.
Вы не можете получить доступ к переменным sass из кода с момента его предварительной компиляции, и он превращается в простой css. Есть обходные пути для достижения таких вещей, но, на мой взгляд, это его не гневает. Если вы все еще хотите, взгляните на этот пост: stackoverflow.com/questions/40418804/…