Выполнять разные действия в одной и той же функции в зависимости от того, какой компонент html вызвал эту функцию

#html #angular #typescript

#HTML #угловатый #машинописный текст

Вопрос:

Я создаю базовое приложение для переключения в angular.У меня есть две кнопки переключения.Я показываю сообщение в toggle.Я хочу вызвать ту же функцию при переключении, но делать разные вещи в зависимости от того, какая кнопка была переключена.Возможно ли это или я должен использовать две разные функции? Заранее спасибо за помощь.

Вот мой код шаблона:

 <mat-card class="card" fxLayout="column" fxLayoutAlign="center center" >
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>

  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"   formControlName="Policy1" >
      <span class="label">{{message}}</span></mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-raised-button [disabled]="disable" class="button" type="submit">Save Settings</button>

</form>
</mat-card>
 

Функция, которую я вызываю с помощью кнопки переключения:

   displayMessage(e){
    if(e.checked)
    {
      this.message = 'Toggled';
    }
      else
      this.message = 'Slide';

  }
 

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

1. Проверьте this:stackblitz.com/edit/angular-heiutf

2. не могли бы вы привести пример stackblitz?

3. @PrashantPimpale Я пытаюсь сделать это только в одной функции вместо того, чтобы использовать другую функцию

Ответ №1:

$event Объект из (change) источника имеет a srcElement , на который вы можете ссылаться, когда хотите выяснить, какой элемент вызвал изменение.

Если вы хотите получить идентификатор элемента, который вызвал функцию, вы делаете это с помощью event.srcElement.id

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

1. Это, вероятно, будет работать, но не совсем по-угловому. @mbojko ответ более идиоматичен

2. Я не могу получить идентификатор. Я получаю сообщение об ошибке Не удается прочитать свойство ‘id’ undefined, когда я пытаюсь получить идентификатор с помощью e.srcElement.id . Какие-либо изменения, которые я должен внести в код шаблона?

Ответ №2:

Вы можете передать обработчику больше аргументов:

 <mat-slide-toggle *ngFor="let item of thingsToDo; let i = index"
   (change)= "onToggle($event, item.id, i)">
 
 onToggle = (event, id, indexInArray) => { //...