如何将值和方法传递给ng模板

Question

考虑同一模板中的以下情况：

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

如何在不在同一模板中两次定义同一组表单/表单控件的情况下重写它？

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

<!-- 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>

请参阅工作示例 [注意我没有使用form但它会给你一个方向] - https://stackblitz.com/edit/angular-8npc19?file=app%2Fbutton-overview-example.html

希望对您有所帮助。

Answer 2

您已经接近了，但是您不能在ng-template使用模板出口，因为这定义了模板。我通常将模板与ng-container一起使用：

<!-- createFoo -->
<ng-container *ngTemplateOutlet="fooForm; context:{$implicit: 'CREATE', fg: createFG}"</ng-container>
<!-- updateFoo -->
<ng-container *ngTemplateOutlet="fooForm; context:{$implicit: 'UPDATE', fg: updateFG}"</ng-container>
<ng-template #fooForm let-action let-formgroup="fg">
  <h1>{{action}}</h1>
  <form [formGroup]="formgroup" (ngSubmit)="....">
    <input formControlName="bar">
  </form>
</ng-template>

因此，let-的东西将在上下文中传递的值分配给模板的本地变量。请注意，let-action从传递的值中接收$implicit值。

否则，您只需(重新(从上下文对象中(重新(分配值，就像let-formgroup="fg"一样。 模板formgroup变量保存作为fg属性传入的值。