我已经在角度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'}>
答案 0 :(得分:0)
我相信您希望在用户点击按钮时更新/切换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>
}
}
希望这对你有用。