如何在stencils JS web组件中处理ngClass

Question

我已经在angular Js 4中制作了组件，现在我正在尝试在stencils js中制作与web组件相同的组件。

我有如下的angular代码

​

<button [class]="classNames" (click)="toggleMasterButton()" 
[ngClass]="masterButtonActive ? _config.masterButtonClass :'-state-grey'">

​

我尝试了下面的代码，但无法像angular组件那样正确解析ngClass和类。任何帮助都将不胜感激。

​

<button  onClick={this.toggleMasterButton.bind(this)}
class={this.masterButtonActive ? this._config.masterButtonClass:'-state-grey'}>

​

Answer 1

我相信当用户单击按钮时，您希望更新/切换css类。

要更新想要在UI上反映的类，在stencils-js中，您需要使用@State进行装饰

您可以阅读有关stenciljs.com doc的更多信息

简而言之，您需要更新代码，如下所示。

 import { State } from '@stencil/core';

 export class TodoList {

  @State() masterButtonActive:boolean = false;


   toggleMasterButton(){
        this.masterButtonActive= true;
     }

      render() {
        <button  onClick={this.toggleMasterButton.bind(this)}
           class={'mcf__btn ' + ( this.masterButtonActive ? this.config.masterButtonClass:   '-state-grey')}My button</button>
        }
   }

希望这对你有用。