Событие Angular Attribute Directives Event - Как принять параметр функции предварительного вызова перед событием изменения - PullRequest
Новая
       21

Событие Angular Attribute Directives Event - Как принять параметр функции предварительного вызова перед событием изменения

0 голосов
/ 02 июля 2019

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

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

Как мне это сделать? 

import { Directive, EventEmitter, Input, OnChanges, Output } from '@angular/core';

@Directive({
  host: {
    '(change)': 'triggerOnChange($event)',
    '[checked]': 'isChecked',
  },
  selector: 'input[type="checkbox"][checklist]'
})
export class ChecklistCheckboxDirective implements OnChanges {

  constructor() { }

  @Input() checklist: any[];
  @Input() checklistValue: any;
  @Input() maxSelectedItems = -1;
  @Output() checklistBeforeChange = new EventEmitter<any>();
  @Output() checklistChange = new EventEmitter<any[]>();
  isChecked: boolean;

  ////////////

  ngOnChanges() {
    const checklist = this.checklist || [];
    this.isChecked = checklist.indexOf(this.checklistValue) >= 0;
  }

  triggerOnChange($event: Event) {
    const target = $event.target as HTMLInputElement;
    let updatedList;
    const checklist = this.checklist || [];

    this.checklistBeforeChange.emit($event);

    if (target && target.checked) {
      if (this.maxSelectedItems === -1 || checklist.length < this.maxSelectedItems) {
        updatedList = [...checklist, this.checklistValue];
        this.checklistChange.emit(updatedList);
      } else {
        target.checked = false;
      }
    } else {
      const i = checklist.indexOf(this.checklistValue);
      updatedList = [...checklist.slice(0, i), ...checklist.slice(i + 1)];
      this.checklistChange.emit(updatedList);
    }
  }

}

И если я использую [checklist], я хотел бы иметь возможность передавать пользовательскую внешнюю функцию, такую ​​как (runBeforeChange)="runThisFunction(item)"

В родительском компоненте: 

  ngOnInit() {
    this.list = [{'title':'One',id:1},{'title':'Two',id:2},{'title':'Three',id:3}];
    this.checked = [1,3];

  }

  runThisFunction(item){
     console.log(item);
  }

шаблон родительского компонента 

<input type="checkbox" *ngFor="let item of list" [(checklist)]="checked" [checklistValue]="item.id" (runBeforeChange)="runThisFunction(item)" />
...