Angular - 使用相同的函数将许多不同的值从子组件传递到父组件答案

【问题标题】：Angular - passing many different values from child to parent component using the same functionAngular - 使用相同的函数将许多不同的值从子组件传递到父组件
【发布时间】：2020-07-01 14:06:42
【问题描述】：

我有一个在父组件中使用的复选框组件。当值发生变化时，我使用@Output() 让父组件知道值已更新。

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

这里是my code的链接

我的问题是：我怎样才能做得更好？为了防止每次我有一个新的复选框时创建一个新函数onRoleChangeCheckboxX()。我的 stackblitz 只是一个例子，两个额外的功能不会打扰我，但是当我必须创建 50 个复选框的情况下呢？

【问题讨论】：

您是否正在尝试为表单控件（复选框、单选、选择等）执行此操作？它有一个特殊的情况是ControlValueAccessor。如果您尝试为表单控件执行此操作，我可以给出答案。
最终取决于你想尝试什么。通常您会为表单使用复选框。如果您这样做，您可以订阅表单更改
我正在创建一个带有复选框和输入的部分，以便更好地搜索表格。例如：如果单击复选框“20-25 岁”，我将添加它以查询参数并显示该年龄的人的过滤表。在这种情况下使用表单会更好吗？

标签： javascript angular typescript

【解决方案1】：

我很难准确说出您想要什么，但如果您使用 eventEmitter 和 Output，您可以使用单个 emit 语句发出一个复杂的 json obj 并向父级发送尽可能多的数据：

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

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

【讨论】：

【解决方案2】：

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

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

app.component.html [checkBoxLinkedProp] = "'checkbox1Value'" -- 我将道具名称作为字符串传递给子复选框组件。并在切换时调用一个方法 (toggle)="onRoleChangeCheckbox($event)"

this.toggle.emit 将发射带有我们传递的字符串属性的对象

<app-checkbox [checkboxName]='checkbox1' [checkboxData]='checkbox1Value' 
  [checkBoxLinkedProp] = "'checkbox1Value'"
 (toggle)="onRoleChangeCheckbox($event)"></app-checkbox>

<app-checkbox [checkboxName]='checkbox2' [checkboxData]='checkbox2Value'  (toggle)="onRoleChangeCheckbox($event)"
[checkBoxLinkedProp] = "'checkbox2Value'"
></app-checkbox>

app.component.ts onRoleChangeCheckbox({checkBoxLinkedProp , checked}) 这个方法会获取我们从发射事件中作为字符串传递的属性名，并设置类的状态。

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  checkbox1 = 'First checkbox';
  checkbox1Value = false;

  checkbox2 = 'Second checkbox';
  checkbox2Value = false;

  onRoleChangeCheckbox({checkBoxLinkedProp , checked}) {
    this[checkBoxLinkedProp] = checked; // property name that passed to child , is received in this emit event and as this will be set
    console.log(this.checkbox1Value , checkBoxLinkedProp); // tested value for 1st checkbox
  }

}

【讨论】：

这实际上是非常有趣的方法，我将在我的代码中尝试这个。谢谢

【解决方案3】：

这是我认为你想要的stackblitz？您需要为您的复选框创建一个数组

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

使用 *ngFor 获得一个通用 html，当您向数组添加另一个复选框时，您不需要编辑它

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

然后您的 onRoleChangeCheckbox() 函数可以变得通用并使用索引更新您的数组

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

这种方法应该可以减少很多重复的代码，因为你只需要在数组中添加新的复选框。

【讨论】：