Кнопка включения / выключения CheckBox

Question

Я использую Angular 6 для своего проекта, и в моем коде есть переключатель с одним ползунком.

У меня есть функция switchClicked, которая отвечает за обработку определенных событий на основе состояния ВКЛ / ВЫКЛэта кнопка.

Есть ли способ передать значение включения / выключения этой кнопки моей функции.

<div class="col-3">
  <label class="slider-switch">
    <input type="checkbox" checked (click)="switchClicked()">
    <span class="slider-slider round"></span>
  </label>
</div>

Answer 1

Один изящный способ сделать это - использовать переменные шаблона Angular, например:

<div class="col-3">
  <label class="slider-switch">
    <input #myCheckbox type="checkbox" checked (click)="switchClicked(myCheckbox.checked)">
    <span class="slider-slider round"></span>
  </label>
</div>

И в вашем Typescript:

switchClicked(clicked) {
    console.log(clicked);
}

Answer 2

В HTML

 <div class="col-3">
      <label class="slider-switch">
        <input   type="checkbox"  [(ngModel)]="myCheckbox"  (ngModelChange)="switchClicked($event)">
        <span class="slider-slider round"></span>
      </label>
    </div>

В TS

  myCheckbox: any = true;

  switchClicked(event) {
    console.log(event);
  }

Примечание. Без события вы можете установить значение флажка, используя свойство myCheckbox, свойство myCheckbox будет обновляться с использованием двусторонних данных.привязка

Чтобы использовать ngMode и ngModelChange, вы должны импортировать FormsModule в файл модуля из

import { FormsModule } from '@angular/forms';  

Answer 3

Вы можете передать $event из вашего метода, который будет содержать различные свойства, включая проверенные.

<div class="col-3">
  <label class="slider-switch">
    <input type="checkbox" checked (click)="switchClicked($event)">
    <span class="slider-slider round"></span>
  </label>
</div>

Машинопись:

switchClicked(event) {
    console.log(event.srcElement.checked);
}

Это даст вамchecked свойство srcElement «истина» или «ложь» в зависимости от вашего состояния ВКЛ / ВЫКЛ.