首页 > 解决方案 > 如何在按角度 6 的按钮时更改事件?

问题描述

每个人。我刚开始学习 Angular 6,我有一个问题。我需要当按下按钮时,不仅按钮的文本会发生变化,而且事件也会发生变化,这应该在按下按钮时发生。例如,第一次单击按钮会将组件添加到内存中,第二次单击此按钮将删除。

这是我的 HTML 代码:

<button class="btn" (click)="toggleEvent()">
        {{addToMemory ? 'Add to memory' : 'Delete from memory'}}
</button>

来自 TS:

addToMemory: boolean = true;

toggleEvent(): void {
 this.addToMemory = !this.addToMemory;
}

我有一个功能可以将电影添加到内存并删除。

add() {}
delete() {}

但我不明白如何通过在这些功能之间单击来切换按钮。请解释和帮助。我找到的或不起作用的示例,或者不清楚如何应用它们。对不起,我的英语不好。

标签: angularhtmltypescript

解决方案


您的 HTML 部分:

<button class="btn" (click)="toggleEvent()">
        {{addToMemoryFlag ? 'Add to memory' : 'Delete from memory'}}
</button>

你的 TS 部分:

addToMemoryFlag: boolean = true;

toggleEvent() {

   this.addToMemoryFlag = !this.addToMemoryFlag;

   if(this.addToMemoryFlag) {
       this.addToMemory();
   } else {
       this.deleteFromMemory();
   }
}

最好区分addToMemory变量和addToMemory()方法的名称,更改变量或方法的名称。


推荐阅读