Question

我有一个需要调用2个功能的按钮。当用户单击按钮时，它应该调用第一个功能，然后在用户单击同一按钮时，它应该调用第二个功能。我还希望按钮中的文本根据所调用的功能进行更改。这是我的代码

  firstFunction() {
      ...
  }

  secondFunction() {
      ...
  }

  <button mat-flat-button  (click)="" color="accent">First function called</button>

Answer 1

您可以创建一个toggle函数，以在两个函数之间切换，如下所示：

let toogled: boolean;
firstFuntion(){}  
secondFuntion(){}
public toggle(): boolean {

   return this.toggled ? this.firstFuntion() : this.secondFuntion();

}

Answer 2

您可以使用此策略；

 <button mat-flat-button  (click)="toggleButton()" color="accent">First function called</button>

和toggleButton（）：

toggleButton() {
  if(!this.isToggled){
    firstFunction();
  }else{
    secondFunction();
  }
  this.isToggled = !this.isToggled;
}

您必须声明isToggled变量并将其初始化为false。

Answer 3

您可以尝试以下方法：

app.component.html

<input type="button"
       (click)="isFirstClick?first():second()"
       value="click me">

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isFirstClick = true;
  first() {
    this.isFirstClick = !this.isFirstClick;
    console.log('first');
  }

  second() {
    this.isFirstClick = !this.isFirstClick;
    console.log('second');
  }

在一个“切换”按钮中调用2个功能

3 个答案: