Angular 13类组件函数创建方法及toggle按钮报错解决

你的代码存在几个语法和逻辑问题，直接导致了"unexpected token"错误，以下是问题点和修正后的代码：

问题分析 #

• 类方法定义错误：TypeScript类中声明方法时，不需要加function关键字，这是触发语法错误的核心原因。
• 模板变量不匹配：模板里用了yourVariableName，但类里的状态变量是buttonState，无法正确绑定状态显示。
• 标签未正确闭合：模板中的按钮标签错误使用/>结尾，应该用</button>正常闭合。
• 切换逻辑错误：this.buttonState != this.buttonState是比较运算，不会修改变量值，需要改为赋值操作。

修正后的完整代码 #

import { Component} from '@angular/core';

@Component({
  selector: 'toggle-button',
  template: `
    <div class="toggle-button">
      <button (click)="toggleState()">{{ buttonState ? "ON" : "OFF" }}</button>
    </div>
  `
})

export class ToggleButton {
  buttonState: boolean = false;

  toggleState() {
    this.buttonState = !this.buttonState;
  }
}

补充说明 #

在Angular类组件中创建函数（方法），直接在类内部定义方法名即可，不需要function关键字；方法可通过this访问类的成员变量，模板通过(click)这类事件绑定语法调用方法。

内容的提问来源于stack exchange，提问作者Sandra Jackson