如何在模板 JS Web 组件中处理 ngClass

Question

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

我有 angular 代码如下

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

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

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

Answer 1

我相信您希望在用户单击按钮时 update/toggle css class。

要更新您想反映在 UI 上的 class，您需要在 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>
        }
   }

希望这对你有用。

如何在模板 JS Web 组件中处理 ngClass

how to handle ngClass in stencils JS web components

javascript

stencils