Как смешать условия и конкатенацию в [ngClass] - PullRequest
Новая
       62

Как смешать условия и конкатенацию в [ngClass]

2 голосов
/ 05 февраля 2020

У меня есть div, который нужно размыть / уменьшить непрозрачность на mouseenter.

Я создал 2 css класс с именами .blur и .less-opacity

Компонент. css

.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.less-opacity {
    opacity: 0.5;
}

У меня есть переменные в TS для переключения с размытого на не размытое. Также есть Input() переменные, одной из которых является имя FontAwesome Icon.

Component.ts 

...

  @Input() iconName: string; //Contains for example 'bed'
  @Input() subTitle: string;
  @Input() info: string;
  private isVisible: boolean = true;
  private isBlurred: boolean = false;

...

  switchVisible() {
    this.isVisible = !this.isVisible;
    this.isBlurred = !this.isBlurred;
  }

Я не могу понять, как правильно кодировать [ngClass], чтобы иметь оба условия для .blur и .less-opacity и на в то же время конкатенация для имени FontAwesome Icon.

Component. html

<div class="vignette d-flex flex-column justify-content-center align-items-center" (mouseenter)="switchVisible()" (mouseleave)="switchVisible()">
    <i [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible, 'fa-' + iconName : true }" class="vignette-icon fal fa-3x"></i>
    <p [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible}" class="vignette-subtitle px-3">{{ subTitle }}</p>
    <p class="vignette-info px-3"></p>
</div>

Как вы можете видеть, я пробовал использовать следующий метод [ngClass]="{'my-class': expression, 'my-class2': expression }"

У меня нет ошибок консоли, но класс значков установлен неправильно и приводит к значку ошибки.

Вот результат, который я получаю, когда происходит событие mouseenter

enter image description here

Классы .blur и .less-opacity правильно добавлено к <p>, но <i> не правильно установлено.

Мой вопрос: Как мне кодировать [ngClass] для <i> , который требует объединения в имени класса?

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Чтобы достичь этого, мне нужно было найти обходной путь, пока я не мог найти способ заставить его работать должным образом только с одним [ngClass].

Я обернул <i> в span и применил .blurred и .less-opacity к span. Кроме того, у меня есть простой [ngClass] для тега <i> с желаемым набором iconName.

Component. html

...
<span class="vignette-icon" [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible }">
 <i [ngClass]="'fa-3x fal ' + iconName"></i>
</span>
...

Component.ts 

...
@Input() iconName: string;

...

ngOnInit() {
 this.setIconName(this.iconName);
}

...

setIconName(iconName: string) {
 if(!iconName.includes('fa-')) {
   this.iconName = 'fa-' + iconName;
 }
}

...

Работает нормально, как это!

0 голосов
/ 05 февраля 2020

Вы можете использовать setter, чтобы добавить 'fa-' вручную к @Input()

Например: Добавить новую переменную в ваш Component.ts 

_iconName: string;
@Input()
set iconName(iconName: string) {
  this._iconName= 'fa-' + iconName;
}

Затем используйте _iconName переменная в вашем Компоненте. html вместо iconName.

...