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

Question

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

我有如下角度代码

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

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

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

Answer 1

我相信您想在用户单击按钮时更新/切换css类。

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

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

简而言之，您需要按如下方式更新代码。

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>
}
}

希望这对你有用。