Question

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

curl web

我如何在没有在同一模板中两次定义同一组form / formControl的情况下重新编写它？

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

curl web:8090

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属性传递的值。

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

2 个答案: