Angular 6, пользовательский шаблон для углового подтверждения popover - PullRequest
Новая
       17

Angular 6, пользовательский шаблон для углового подтверждения popover

0 голосов
/ 02 сентября 2018

У меня проблема и я чувствую себя глупо, поэтому мне нужна ваша помощь!

Поэтому я использую этот виджет: https://mattlewis92.github.io/angular-confirmation-popover/docs/directives/ConfirmationPopover.html

С этим мы можем установить пользовательский шаблон через "customTemplate: TemplateRef;"

Но я не нашел, как определить глобальный шаблон для каждого компонента, который использует этот виджет. 

<ng-template #customTemplate let-options="options">
   <div [class]="'popover ' + options.placement" style="display: block">
     My custom template
   </div>
</ng-template>

Я хочу определить этот шаблон как компонент и получить его, не переписывая его.

Большое спасибо за помощь:)

1 Ответ

0 голосов
/ 02 сентября 2018

Не знаю, лучший ли это способ, но я нашел "решение":

Компонент лямбда: 

<button mwlConfirmationPopover
                    [popoverTitle]="popoverTitle"
                    [popoverMessage]="popoverMessage"
                    placement="left"
                    [customTemplate]="requestor"
                    (confirm)="delEquip(e._id)"
                    (cancel)="cancelClicked = true" class="btn btn-danger btn-sm"><span class="fa fa-trash" style="margin-right:5px;"></span> Delete</button>
<ng-template #requestor let-options="options"><app-box [options]="options"></app-box></ng-template>

и шаблон: 

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css']
})
export class BoxComponent  {
  @Input() options: object;
  constructor() {}
}

 <div style="display: block">
    <div class="fond">
      <div class="boxAdd">
        <div class="card card-info" style="margin: 0 !important;">

          <div class="card-header">
            <h3 class="card-title"><i class="fas fa-edit"></i> {{options.popoverTitle}}:</h3></div>
          <div class="card-body">
            {{options.popoverMessage}}
          </div>
          <div class="card-footer">
            <button type="submit" class="btn btn-primary" (click)="options.onConfirm({clickEvent: $event})">Confirm</button>
            <button  id="cancel" type="button" (click)="options.onCancel({clickEvent: $event})" class="btn btn-danger float-right">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
...