Угловой 7 - множественные классы (пробелы) приводят к сбою ngClass

132
13

Многие фреймворк-фреймворки инкапсулируют свои стили CSS, добавляя префикс к другому классу.

Например, начальная btn btn-primary: btn btn-primary где btn - префикс.

Если бы я условно применил это в [ngClass], angular сломался бы:

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}"></div>

Тем не менее, это было бы легко решить путем извлечения общего деноминационного класса, например:

<div class="btn" [ngClass]="{'btn-primary': booleanVar, 'btn-danger': !booleanVar}"></div> Вуаля, у нас больше нет пробелов в наших условиях и угловых утверждает.

Теперь с некоторым контекстом. Попробуем применить это к подходу к Font Awesome, их префиксы можно найти здесь.

Style       Prefix  Example 
Solid fas <i class="fas fa-igloo"></i>
Regular far <i class="far fa-igloo"></i>
Light fal <i class="fal fa-igloo"></i>
Brands fab <i class="fab fa-font-awesome"></i>

1-й вопрос: возможно ли использовать пробелы в условном запросе? как?

2-й вопрос: (если 1-й вопрос невозможен) Как мне решить ситуацию, когда префикс больше не является статическим (как в случае с Font Awesome)?

спросил(а) 2021-01-25T22:05:14+03:00 5 месяцев назад
1
Решение
142

Обновление, я проверил и использование пробелов в порядке.

Так это

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}></div>

должно сработать.

Также вы можете использовать этот формат;

[ngClass]="booleanVar? 'btn-primary': 'btn-danger'"

ответил(а) 2021-01-25T22:05:14+03:00 5 месяцев назад
45

Вы делаете это класс за классом:


[ngClass]="{'btn': true, 'btn-primary': booleanVar, 'btn-danger': !booleanVar}"

ответил(а) 2021-01-25T22:05:14+03:00 5 месяцев назад
-6

Чтение документации по директиве ngClass

https://angular.io/api/common/NgClass

Я нашел этот пример:

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

НО! ваш код:

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}></div>

Сломается, потому что вы пропустили конец "" "после последнего"} "

ответил(а) 2021-01-25T22:05:14+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема