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

Question

我有一个在父组件中使用的复选框组件。当值发生变化时，我使用 an@Output()让父组件知道值已更新。我的代码正在运行，但我在我的项目中多次使用复选框组件，我不想每次创建新函数来设置新的变量值时都创建它。这是我的代码的链接我的问题是：我怎样才能做得更好？为了防止onRoleChangeCheckboxX()每次我有一个新的复选框时都创建一个新功能。我的 stackblitz 只是一个例子，两个额外的功能不会打扰我，但是当我必须创建 50 个复选框的情况下呢？

Answer 1

这是我认为您想要的堆栈闪电战？您需要为您的复选框创建一个数组

  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>

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

  onRoleChangeCheckbox(ev, index) {

    this.checkboxes[index].value = ev;

  }

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

Answer 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

  }

}

Answer 3

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

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

var obj = { check1: true, check2: false, check3: false }

this. messageEvent.emit(obj);