在 Stencil.js 中使用 ngclass

Question

下面是 Angular 2 中的代码。有人可以解释一下如何在 Stencil.js 中使用 ngclass。

我创建的组件是 Angular2。现在尝试在 Stenciljs 中重新创建相同的内容：

<div class="inner_holder" [ngClass]="isSelected(day)">
  <div class="col day">{{day.month}}</div>
     <div class="col date">
       <span>{{day.date}}</span>
     </div>
</div>    

打字稿代码：

isSelected(day) {
  return (day.fullDay === this.selectedDay) ? "active" : "";
 }

Answer 1

您还可以使用以下语法：

<div 
  class={{
    'error': this.hasError,
    'hidden': !this.isOpen
  }}
>

Answer 2

我不使用 ngClass，而是使用 className 或 class 变量，并向其添加一些 jsx 语法。例如，如果您想根据其活动设置按钮样式，您可以这样做

 <button onClick={() => this.doSomething()}
  class={ 'vote' +  (this.isActive === -1 ? ' active' : ' inactive') }>

当变量 isActive 返回 true 时，这会给它“活动”类。