Как изменить событие при нажатии кнопки в угловых 6?

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;
    }
  }