我正在研究清单模块:
我有一个指令,它正在监视复选框的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);
}