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

【问题标题】：How to pass values and methods to ng-template?如何将值和方法传递给 ng-template？
【发布时间】：2019-06-20 22:31:00
【问题描述】：

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

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

【问题讨论】：

标签： angular ng-template

【解决方案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

希望对你有帮助。

【讨论】：

我认为这看起来不错，但是如何将索引从 ng-container 传递给 methodToCallOnSubmit？此方法的输入参数取决于索引，因为 ng-container 在 ngFor 内部。
@UğurDinç 在答案中查看我的编辑。

【解决方案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-something 将在上下文中传递的值分配给模板本地的变量。请注意，let-action 从传递的值中接收 $implicit 值。

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

【讨论】：

如何将索引传递到 updateFG？我需要在（ngSubmit）中填写...。