如何将值和方法传递给 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>

如果不在同一模板中两次定义同一组表单/formControl，我该如何重写？

我认为它需要看起来像这样？ >>>

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

在Angular6中我是这样提议的-

<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 属性.

传入的值

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

How to pass values and methods to ng-template?

angular

ng-template