Использование ngClass для пользовательских компонентов в Angular 7 - PullRequest
Новая
       23

Использование ngClass для пользовательских компонентов в Angular 7

0 голосов
/ 15 мая 2019

У меня есть пользовательский компонент, к которому я пытаюсь добавить класс ".empty", основанный на переменной, но класс никогда не добавляется.Даже если я просто изменю! MyArray.length на true.Возможна ли эта директива с пользовательским компонентом?Если нет, то что было бы хорошим обходным путем.Вложение другого элемента до или после этого тега для меня не вариант. 

<a-grid rows="true" class="a-grid" [ngClass]="{'empty': !myArray.length }">

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Используйте class.classname как показано ниже: 

<a-grid rows="true" class="a-grid" [class.empty]="!myArray.length">
0 голосов
/ 15 мая 2019

Я думаю, что ваш главный вопрос: возможно ли использовать [ngClass] с пользовательским компонентом?Ответ - да.Но иногда это сложно.Например, смотрите ссылку ниже:

https://stackblitz.com/edit/angular-csprde?file=src/app/app.component.css

Как видите, ngClass отлично работает с пользовательским компонентом.Но просто удалите положение: абсолютное;из пустого класса и класса def.ngClass работает, но результат не такой, как мы ожидаем.

Когда вы используете ngClass с пользовательским компонентом, лучше не использовать class = "".См. Пример:

https://stackblitz.com/edit/angular-3jdkra?file=src/app/app.component.html

Как я уже говорил, использование ngClass иногда сложно.Можете ли вы создать простой проект в stackblitz, если он еще не решен?

Редактировать 1:

Я работал над вашим проектом stackblitz. yourProject Одним из решений является использование class = "{{myClass}}" вместо [ngClass].Поэтому я изменил файл some-component.component.html следующим образом:.Скопируйте и вставьте в свой проект: 

<a-component 
   rows="true"

   class='{{myClass}}'

   [attr.data-itemIndex]="itemIndex"
 >I should be blue if empty is assigned</a-component>


  <button (click)="myClass='dropzone'" style="margin:10px;">dropzone 
  </button>

 <button (click)="myClass='dropzone 
 empty'"style="margin:10px;">dropzone 
 empty </button>

Я добавил к кнопкам, и вы можете изменить переменную myClass, чтобы назначить некоторые классы компоненту.Не забудьте добавить определение myClass как строковую переменную в ваш файл TS: 

myClass="dropzone empty";

Таким образом, вы можете увидеть результат здесь: https://stackblitz.com/edit/angular-56ybzr?file=src/app/a-component/a-component.component.ts

...