angular - 如何将值和方法传递给 ng-template？

Question

考虑同一模板内的以下情况:

<!-- createFoo -->
<form [formGroup]="fooForm1" (ngSubmit)="createFoo(fooForm1)">
  <input formControlName="bar">
</form>

<!-- updateFoo -->
<form [formGroup]="fooForm2" (ngSubmit)="updateFoo(fooForm2, index)">
  <input formControlName="bar">
</form>

如果不在同一个模板中两次定义相同的表单/formControls 集，我该如何重写它？

我相信它需要看起来像这样？ >>>

<!-- createFoo -->
<ng-template [ngTemplateOutlet]="fooForm" [ngTemplateOutletContext]="..."></ng-template>

<!-- updateFoo -->
<ng-template [ngTemplateOutlet]="fooForm" [ngTemplateOutletContext]="..."></ng-template>

<ng-template #fooForm>
  <form [formGroup]="...." (ngSubmit)="....">
    <input formControlName="bar">
  </form>
</ng-template>

Answer 1

在 Angular 6 中，这就是我的建议 -

<ng-container *ngTemplateOutlet="fooForm; context: {$implicit: yourObjectWhichHasPropsAndMethods}">
</ng-container>

<ng-template #fooForm let-yourObjectWhichHasPropsAndMethods>
  <form [formGroup]="...." (ngSubmit)="yourObjectWhichHasPropsAndMethods.methodToCallOnSubmit">
    <input formControlName="bar">
  </form>
</ng-template>

interface YourContractToReuseTemplate {
  prop1;
  prop2;
  //this should return a function which will be called on submit
  methodToCallOnSubmit;
}

yourObjectWhichHasPropsAndMethods 对象的类型为 YourContractToReuseTemplate。

希望它能给你一个想法。

编辑 - 根据用户的要求

要获取索引，您可以执行以下操作:

<ng-container *ngFor="let d of data; let i = index">
    <ng-container *ngTemplateOutlet="fooForm; context: {$implicit: {data: d, index: i}}">
    </ng-container>
</ng-container>

<ng-template #fooForm let-d>
    <h1>{{d.data.prop1}}</h1>
    <button (click)="d.data.methodToCallOnSubmit(d, d.index)">Button From Template Ref</button>  
</ng-template>

查看工作示例[注意，我没有使用表单，但它会给您一个方向] - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.html

希望有帮助。