Question

我有一个自定义组件，我试图基于变量向其中添加“ .empty”类，但是从未添加该类。即使我只是将！myArray.length更改为true。定制组件可以使用此指令吗？如果没有，那将是一个很好的解决方法。在我看来，在此标签之前或之后嵌套另一个元素是不可行的。

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

Answer 1

我认为您的主要问题是：是否可以将[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变量以将某些类分配给组件。不要忘记在ts文件中添加define myClass作为字符串变量：

myClass="dropzone empty";

因此您可以在这里查看结果： https://stackblitz.com/edit/angular-56ybzr?file=src/app/a-component/a-component.component.ts

Answer 2

使用class.classname如下：

<a-grid rows="true" class="a-grid" [class.empty]="!myArray.length">

在Angular 7中的自定义组件上使用ngClass

2 个答案: