角度属性指令事件-更改事件之前如何接受预回调函数参数

时间:2019-07-02 02:14:55

标签: javascript angular angular-directive

我正在研究清单模块: 我有一个指令,它正在监视复选框的a事件,并在数组中进行更改,它会将选中的复选框的值收集到数组中。

有时候,我需要传递一个自定义函数来进行其他更改,之前,该触发函数将由change事件运行。

我应该怎么做?

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);
  }

0 个答案:

没有答案