Javascript 角度-使用同一函数将多个不同的值从子组件传递到父组件

我在父组件中使用了一个复选框组件。值更改后，我将使用

@Output（）

让父组件知道值已更新

我的代码正在工作，但我在项目中多次使用复选框组件，我不想每次创建新函数时都创建它来设置变量的新值

这里是链接到

我的问题是：我怎样才能做得更好？为了防止每次我有一个新复选框时都创建一个新函数

onRoleChangeCheckboxX（）

。

---

我的stackblitz只是一个例子，两个额外的函数并不困扰我，但是当我必须创建50个复选框时，情况会怎样呢。

我很难确切地说出您想要什么，但是如果您使用eventEmitter&Output，您可以使用一个Emit语句发出复杂的json obj，并向父级发送您想要的数据：

@Output() messageEvent = new EventEmitter<any>();

var obj = { check1: true, check2: false, check3: false }
this. messageEvent.emit(obj);

@Output（）messageEvent=neweventemitter（）；
var obj={check1:true，check2:false，check3:false}
这messageEvent.emit（obj）；

可能这不是更好的方法，但在某些情况下可能会这样，在所有情况下都会有一个emit处理程序

  import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 
    @Component({

  selector: "app-checkbox",
  templateUrl: "./checkbox.component.html",
  styleUrls: ["./checkbox.component.css"]
})
export class CheckboxComponent implements OnInit {
  @Input() checkboxName;
  @Input() checkboxData:any; 
  @Input() checkBoxLinkedProp:any; // added another property it is the name of the property in the parent component you are updating 
  
  @Output() toggle: EventEmitter<any> = new EventEmitter<any>(); // emit a object instead of bool

  constructor() {}

  ngOnInit() {}

  onToggle() {
    const checkedOption = this.checkboxData;
    this.toggle.emit({checked:checkedOption , checkBoxLinkedProp: this.checkBoxLinkedProp });
  }
}

这是我认为你想要的东西的一份清单？您需要为复选框创建一个数组

  checkboxes = [
    {
      name: 'First checkbox',
      value: false
    },
    {
      name: 'Second checkbox',
      value: false
    },
  ]

使用*ngFor可以创建一个通用html，在向数组中添加另一个复选框时不需要编辑该html

<app-checkbox *ngFor="let box of checkboxes; let i = index" 
              [checkboxName]="box.name" 
              [checkboxData]="box.value"  
              (toggle)="onRoleChangeCheckbox($event, i)"></app-checkbox>

---

此方法应该可以减少大量重复代码，因为您只需要向数组中添加新的复选框。

是否尝试对表单控件（复选框、单选框、选择框等）执行此操作？它有一种特殊情况，即

ControlValueAccessor

。我可以给出一个答案，如果您试图为表单控件这样做。这最终取决于您希望尝试什么。通常，您会对表单使用复选框。如果您这样做，您可以订阅表单更改。我正在创建一个带有复选框和输入的部分，以便在搜索表时获得更好的结果。例如：如果选中复选框“20-25岁”，我会将其添加到查询参数中，并显示该年龄段人员的筛选表。在这种情况下使用表单更好吗？这实际上是一种非常有趣的方法，我将在我的代码中尝试这种方法。非常感谢。

  checkboxes = [
    {
      name: 'First checkbox',
      value: false
    },
    {
      name: 'Second checkbox',
      value: false
    },
  ]

<app-checkbox *ngFor="let box of checkboxes; let i = index" 
              [checkboxName]="box.name" 
              [checkboxData]="box.value"  
              (toggle)="onRoleChangeCheckbox($event, i)"></app-checkbox>

  onRoleChangeCheckbox(ev, index) {
    this.checkboxes[index].value = ev;
  }