Angular 6，角度确认弹出窗口的自定义模板

Question

我有一个问题，感到愚蠢，所以我需要你的帮助！

所以我使用这个小部件：https://mattlewis92.github.io/angular-confirmation-popover/docs/directives/ConfirmationPopover.html

有了这个，我们可以通过“customTemplate：TemplateRef;”设置自定义模板。

但我没有找到如何为使用此小部件的每个组件定义全局templateref。

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

我想要的是将此模板定义为组件并检索它而不重写它。

非常感谢您的帮助 ：）

Answer 1

不知道这是否是最好的方法，但我找到了“解决方案”：

一个lambda组件：

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