使用动态模板时如何将事件从子级传递给父级

如何解决使用动态模板时如何将事件从子级传递给父级

我有一个使用动态生成模板的 Angular 11 Reactive 表单。我需要将索引值从子项向上传递给父项以删除 FormArray 中的一行。

我修改了标准的 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading" style="background-color:#101010;color:#D0D0D8"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#featured"> Featured ★★★★★</a> </h4> </div> <div id="featured" class="panel-collapse collapse"> <div class="panel-body" style="background-color:#101010;color:#D0D0D8"> <br> 、FormGroup和FormControl来承载一个数据对象，该数据对象承载了各种类型的信息，包括要生成的表单类型（输入、数据、复选框、等）

我基于此处引用的 Angular 文档中的示例：Building dynamic forms

就我们的目的而言，FormArray 是表管理的地方。 Parent Template 是 instanceFC.controls 控件数组。 FormArray's 是数组的当前元素 fc 的 FormControl。然后使用选择器 i 将其传递给下面的指令。

该指令然后调用由 MyFormControl 携带的 mt4SizingdisplayForms 指定的所需类型。

data.templateType 模板具有当前行索引（从 Child 的实例构造中的 Parent 传递。我需要将此索引传递回父级以删除该特定来自 Directive 的控制。

我了解到 FormArray 和 ng-container 不支持接收事件，因为它们不在 DOM 中。一定有办法。我不想创建服务，因为在完成的表单中可能有很多情况需要在孩子和父母之间移动一个事件。

有没有人有解决办法？？

父模板

ng-template

<ng-container> <button type="button" (click)="addArray()">Add to Array</button> <span class="row"> <ng-container *ngFor="let fc of instanceFC.controls; let i = index" mt4SizingdisplayForms [dfFormControl]="fc" [arrayIndex]="i"> <button type="button" (click)="removeArray(i)">Remove</button> </ng-container> </span> </ng-container>

Parent Class

}

export class FormArrayComponent implements OnInit { @ input()dfcFormGroup: MyFormArray; instanceFC: MyFormArray; questions: QuestionsClass[]; localControls: any; countTicks = 0; constructor( private _afs: AccessFormsService,// service that builds FormGroups form QuestinClass objects private _qRepo: QuestionRepoService) {} // service for Form data ngOnInit(): void { this.localControls = this.instanceFC.controls; this._qRepo.questionsDataStore$.subscribe(); } addArray(): void { // addr to array based on questions in instanceFC.data.questions // first set all question.initValue to '' const _q = this.instanceFC.data.question[0]; // only the first element in the array _q.classData.initValue = ''; _q.classData.question.map((xx) => { xx.classData.initValue = ''; }); const _localGroup = this._afs.buildQuestions(_q); // all FormArray items must be if (_localGroup.parent === null) { _localGroup.setParent(this.instanceFC); } this.instanceFC.controls.push(_localGroup); } removeArray(i: number): void { console.log(i); this.instanceFC.removeAt(i); }

Child template - a simple Button

<div class="demo-full-width" fxFlexFill [ngStyle]="{'width.em': instanceFC.data.formCols}" > <button mat-raised-button type="button" (click)="doEvent(arrayIndex)" >Click Here</button> </div>

Child Component (Button)

export class ButtonComponent implements OnInit { @input() arrayIndex: number; @Output() passEvent: EventEmitter<any> = new EventEmitter<any>(); instanceFC: MyFormControl; constructor() {} ngOnInit(): void { } doEvent(val: any){ this.passEvent.emit(val); } }

Directive mt4SizingdisplayForms

}