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

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

0 голосов
/ 04 февраля 2019

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

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

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

<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)?

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

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

[ngClass]="{'btn': true, 'btn-primary': booleanVar, 'btn-danger': !booleanVar}"
0 голосов
/ 04 февраля 2019

Обновление, я проверил, и пробелы в порядке.

Так что это 

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

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

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

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

...