3

下面是 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" : "";
 }
4

2 回答 2

8

您还可以使用以下语法:

<div 
  class={{
    'error': this.hasError,
    'hidden': !this.isOpen
  }}
>
于 2020-01-19T23:35:24.090 回答
5

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

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

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

于 2018-02-27T22:39:25.103 回答