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

Question

我有一个自定义组件，我试图根据变量向其添加“.empty”class，但从未添加 class。即使我只是将 !myArray.length 更改为 true。自定义组件可以使用此指令吗？如果不是，那将是一个很好的解决方法。在这个标签之前或之后嵌套另一个元素对我来说不是一个选项。

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

Answer 1

我认为你的主要问题是：是否可以将 [ngClass] 与自定义组件一起使用？答案是肯定的。但有时这很棘手。例如见下面 link:

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

如您所见，ngClass 与自定义组件完美配合。但是只需删除 position:absolute;从空和 def class。 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 变量以将一些 classes 分配给组件。不要忘记在您的 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

Using ngClass on Custom Component in Angular 7

angular

components

ng-class