Блог

Главная - Вопросы по программированию - Как изменить событие нажатия кнопки в соответствии с различными ситуациями на Angular 9

Как изменить событие нажатия кнопки в соответствии с различными ситуациями на Angular 9

#javascript #angular #bootstrap-4

#javascript #angular #bootstrap-4

Вопрос:

Я использую Angular 9 для разработки веб-приложения. Поэтому мне нужно использовать загрузочные модальности, такие как

  <div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{MODAL_TITLE}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{MODAL_BODY}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" (click)="function_1()" class="btn btn-primary">SUBMIT</button>
      </div>
    </div>
  </div>
</div>

Я вызвал функцию, когда нажал кнопку отправки. Ну, я просто хочу изменить функцию, которая отправляет функцию, вызываемую в разных случаях.

Итак, то, что я просто хочу сделать в файле ts:

 MODAL_BODY = "BODY STRING";

MODAL_TITLE: FUNCTION ;
modal.show();

function1(){
console.log("function 1 works"}
}

function2(){
console.log("function 2 works")
}

Иногда я хочу использовать function2() вместо function1().

Затем я хочу изменить функцию, которая вызывает кнопку отправки в разных ситуациях так же, как:

     <button type="button" (click)="function_1()" class="btn btn-primary">SUBMIT</button>

//some times i need to use this button below. so I need to change it from ts file

    <button type="button" (click)="function_2()" class="btn btn-primary">SUBMIT</button>

Есть ли способ это сделать? из файла ts или динамически?

Заранее спасибо.

Комментарии:

1. Альтернативная идея заключается в том, что у вас есть одна кнопка в шаблоне, которая имеет одну функцию-обработчик с одним параметром. И на основе этого параметра if or switch решает, какой модальный режим отображается.

2. @MilanTenk да. я только что подумал об этом. Но мне интересно, возможно ли это так, как я написал?

3. Вы можете использовать *ngIf директиву angulars, чтобы добиться именно того, что предложил @MilanTemk, но в шаблоне

Ответ №1:

Если мы хотим динамически изменять саму кнопку в шаблоне *ngIf , можно использовать структурную директиву. (Как пишет chrnx в комментарии к вопросу.) Чтобы получить пример для этого, взгляните на пример ниже.

В коде шаблона Angular:

 <p>
  Used button
  <br />
  <button *ngIf="displayedButton === 1" (click)="onButtonOneClick()">
    ButtonOne
  </button>
  <button *ngIf="displayedButton === 2" (click)="onButtonTwoClick()">
    ButtonTwo
  </button>
</p>
<p>
  Change button state
  <br />
  <button (click)="onChangeStateClick()">Change</button>
</p>

В коде компонента:

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  displayedButton = 1;

  onButtonOneClick() {
    console.log("Button 1 click");
  }

  onButtonTwoClick() {
    console.log("Button 2 click");
  }

  onChangeStateClick() {
    this.displayedButton = this.displayedButton === 1 ? 2 : 1;
  }
}

Пример Stackblitz:
https://stackblitz.com/edit/angular-ivy-irmbkk?file=src/app/app.component.ts