Как передать значения и методы в ng-template? - PullRequest
Новая
       21

Как передать значения и методы в ng-template?

0 голосов
/ 21 июня 2019

Рассмотрим следующую ситуацию внутри одного и того же шаблона: 

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

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

Как бы я переписал это без определения одного и того же набора форм / formControls дважды в одном шаблоне?

IВерите, что это должно выглядеть примерно так?>>> 

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

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Вы близки, однако вы не можете использовать выход шаблона на 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.

1 голос
/ 21 июня 2019

В 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

Надеюсь, это поможет.

...