#angular
#angular
Вопрос:
У меня есть 4 темы, которые я разрешаю пользователю выбирать для моего приложения angular. Затем я хочу присвоить строку, соответствующую этой теме, основному div, который содержит приложение. Я могу сделать это вручную, изменив
<div class="dark-theme"> or
<div class="default-theme"> etc.
Что я хочу иметь возможность сделать, так это установить classname для темы из переменной, которую я извлекаю из настроек приложения. например
(component.ts)
this.theme = this.settings.theme
(component.html )
<div class={{theme}}>
Я пробовал [ngClass], [className], {{theme}}, ‘{{theme}}’ и кучу других вариантов, но ничего не работает. Я знаю, что передаю правильное название темы в html, поскольку я также могу отобразить его в элементе p>. Все прочитанное, что я сделал, продолжает ссылаться на использование условного выражения с ngClass. Вы не можете просто присвоить строку непосредственно из содержимого / значения строковой переменной в компонентном typescript?
Спасибо….
Комментарии:
1.
<div class="{{theme}}">(у вас отсутствуют двойные кавычки)2. Нет, тема не меняется. Если я наберу class=»dark-theme» вручную, это сработает. Но в моем теге paragraph в качестве значения переменной отображается ‘»dark-theme»‘, поэтому я знаю, что оно входит.
3. Проверьте этот небольшой пример. Нет причин, по которым это не сработало бы. Проверьте окончательный HTML-код, просмотрев исходный код (Ctrl U в большинстве браузеров)
4. я добавляю правильную тему в html. Но это не меняет тему, когда я меняю класс. Даже пытался перезагрузить страницу вручную, но тема по-прежнему не принимается.
5. Если окончательный HTML правильный, то он не связан с Angular. Ваш браузер понятия не имеет, задано ли имя класса жестко или происходит из переменной.
Ответ №1:
<div [ngClass]="theme"/>
Попробуйте это