Question

每个人。我刚开始学习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() {}

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

Answer 1

您的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()方法之间区分名称，更改变量或方法的名称。

Answer 2

模板：

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

组件：

    addToMemory: boolean = true;

    toggleEvent(evt){
    this.addToMemory = !this.addToMemory;
    switch(evt.target.innerHTML.trim()){
      case 'Add to memory':
          this.Addtomemory();
          break;
      case 'Delete from memory':
          this.DeleteFrommemory();
          break;
    }
  }

按下角度6中的按钮如何更改事件？

2 个答案: