如何在 Angular 13 的类组件内创建一个函数？

Question

我有 switch toogle 的代码，但我无法摆脱错误的问题是“意外的标记”是类中期望的构造函数或方法。这是需要实现的 Angular 组件和类，我不需要其他文件来实现这两个实现，下面是我尝试过的。

`// code in Angular js 13
import { Component} from '@angular/core';

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

export class ToggleButton {
    buttonState: boolean = false;

    function toggleState() {
        this.buttonState != this.buttonState;
    }
}`
```[enter image description here][1]


  [1]: https://i.stack.imgur.com/0sgd8.png

Answer 1

你好，我是Gulshan Negi 好吧，Angular 3 不是一个版本；也许你在谈论 Angular 13。 请检查并回复。 谢谢

Answer 2

从这里修改你的模板：

<div class="toggle-button">
    <button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }} />
</div>

对此：

<div class="toggle-button">
    <button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>
</div>

你弄乱了按钮的开始和结束标签。文本“ON”和“OFF”应该位于两个按钮标签之间：

<button></button>