TA貢獻1803條經驗 獲得超3個贊
這是我認為您想要的堆棧閃電戰？您需要為您的復選框創建一個數組
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;
}
這種方法應該可以減少很多重復的代碼，因為您只需要向數組添加新的復選框。
TA貢獻2019條經驗 獲得超9個贊
可能這不是更好的方法，但它可能在某些情況下有效，在所有情況下都會有一個發射處理程序。
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
}
}
TA貢獻1804條經驗 獲得超8個贊
我很難準確地說出你想要什么，但如果你使用 eventEmitter & Output，你可以用一個單一的發射語句發射一個復雜的 json obj，并向父級發送盡可能多的數據：
@Output() messageEvent = new EventEmitter<any>();
var obj = { check1: true, check2: false, check3: false }
this. messageEvent.emit(obj);
舉報