我有一个问题,对此感到愚蠢,因此需要您的帮助!
所以我用这个小部件: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>
我想要的是像组件一样定义此模板,并在不重写的情况下检索它。
非常感谢您的帮助:)
答案 0 :(得分:0)
不知道这是否是最好的方法,但是有找到的“解决方案”:
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>