可能這不是更好的方法，但它可能在某些情況下有效，在所有情況下都會(huì)有一個(gè)發(fā)射處理程序。
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'" - 我將道具名稱(chēng)作為字符串傳遞給子復(fù)選框組件。并在切換時(shí)調(diào)用一個(gè)方法(toggle)="onRoleChangeCheckbox($event)"
this.toggle.emit將發(fā)射帶有我們傳遞的字符串道具的對(duì)象
<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})這個(gè)方法將把我們作為字符串從發(fā)射事件傳遞過(guò)來(lái)的屬性名稱(chēng)設(shè)置為類(lèi)的狀態(tài)。
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
}
}
