Как использовать Use Mixin $ Variable в ngStyle? - PullRequest
Новая
       6

Как использовать Use Mixin $ Variable в ngStyle?

0 голосов
/ 11 апреля 2019

У меня здесь есть переменная mixin:

component.scss 

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

Как я могу использовать вышеуказанную переменную mixin в [ngStyle]здесь:

component.html 

<mat-list-item *ngFor="let OBJ of dataSOURCE" [ngStyle]="{'background-color': OBJ.is_selected ? $bg-selected-list-item : (OBJ.back_color || $bg-list-item) }">
</mat-list-item>

Ожидание

Дело 1 (ЕслиListItem выбран): затем используйте переменную mixin $bg-selected-list-item в качестве цвета фона элемента списка

Case 2 (Если ListItem не выбран и если для OBJ задан back_color)

-> Затем используйте OBJ.back_color в качестве цвета фона элемента списка

Случай 3 (Если ListItem не выбран и Если OBJ имеет NO back_color set)

-> Затем используйте переменную mixin $bg-list-item в качестве цвета фона элемента списка.

Я столкнулся с проблемой ниже

  • Оба Переменные цвета Mixin не применяются в ngStyle **

  • ТолькоOBJ.back_color ** применяется.

НИЖЕ ОТВЕТ (спасибо @matirmv)

component.scss 

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

.my-background-class{
  background-color:$bg-list-item;
}
.my-background-selected-class{
  background-color:$bg-selected-list-item;
}

component.html 

<mat-list-item *ngFor="let OBJ of dataSOURCE" class="my-background-class" [ngStyle]="!OBJ.is_selected && {'background-color': OBJ.back_color}"
                [ngClass]="{'my-background-selected-class': OBJ.is_selected}">

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Переменные Mixin нельзя использовать в HTML-шаблон. Поскольку они являются переменными scss, вы можете использовать их только в вашем файле component.scss.

То, что вам нужно сделать, довольно просто:

создайте класс CSS, который использует миксин, который вы хотите, например: 

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

.my-background-class{
  background-color:$bg-list-item;
}
.my-background-selected-class{
  background-color:$bg-selected-list-item;
}

Затем перейдите в файл component.html и используйте [ngClass] (не ngStyle, который предназначен только для свойств css): 

<mat-list-item *ngFor="let OBJ of dataSOURCE" class="my-background-class" [ngClass]="{'my-background-selected-class': OBJ.is_selected">
</mat-list-item>

Как видите, классом по умолчанию будет .my-background-class, а если выбран элемент списка, будет добавлен класс .my-background-selected-class для изменения цвета фона.

Вот и все! ;)

1 голос
/ 11 апреля 2019

Переменные SASS - это конструкция времени компиляции, а не свойство времени выполнения.Angular преобразует ваш шаблон html в предварительно скомпилированный (ngFactory) класс javascript (AOT), чтобы облегчить доставку компилятора вместе с кодом вашего приложения.Это приводит к повышению производительности и ускорению рендеринга.

Следовательно, вам необходимо определить классы css, на которые может ссылаться ng-style в скомпилированном компоненте Angular во время выполнения.

...