Angular 6，角度确认弹出框的自定义模板答案

【问题标题】：Angular 6, custom template for angular confirmation popoverAngular 6，角度确认弹出框的自定义模板
【发布时间】：2018-09-02 23:49:50
【问题描述】：

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

所以我使用这个小部件：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>

我想要的是将这个模板定义为一个组件并在不重写的情况下检索它。

非常感谢您的帮助:)

【问题讨论】：

为什么不在一个单独的组件中添加 ng-template 代码，比如 app-temp 并使用该组件选择器，如 <app-temp></app-temp> 以及每个组件的全局 templateRef 的意思?我不明白。
感谢您的回答。事实上，当我们使用这个小部件时，我们会这样使用它：<a mwlConfirmationPopover [popoverTitle]="popoverTitle" [popoverMessage]="popoverMessage" placement="left" (confirm)="****" [customTemplate]="app-box" (cancel)="cancelClicked = true" class="btn btn-danger text-white float-right ml-3">Delete</a> 我们需要将 customTemplate 声明为模板引用的名称。但是我不想在我将使用它的每个组件中编写 ng-template，所以我想定义模板并在任何地方重复使用它

标签： angular templates directive

【解决方案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>

【讨论】：