原来它不需要任何花哨的东西,只需要复制模板。其他一切似乎都只是通过扩展它来工作
import { Component, Input, OnInit, Output, forwardRef, Inject, ElementRef,Renderer2, NgZone } from '@angular/core';
import { Dialog, DomHandler } from 'primeng/primeng';
@Component({
selector: 'sb-dialog',
providers: [DomHandler],
template: `
<div #container [ngClass]="{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}" [style.display]="visible ? 'block' : 'none'"
[ngStyle]="style" (scroll)="onScroll($event)" [class]="styleClass" [style.width.px]="width" [style.height.px]="height" [style.minWidth.px]="minWidth" [style.minHeight.px]="minHeight" (mousedown)="moveOnTop()" [@dialogState]="visible ? 'visible' : 'hidden'"
role="dialog" [attr.aria-labelledby]="id + '-label'">
<div #titlebar class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"
(mousedown)="initDrag($event)" *ngIf="showHeader">
<span [attr.id]="id + '-label'" class="ui-dialog-title" *ngIf="header">{{header}}</span>
<span [attr.id]="id + '-label'" class="ui-dialog-title" *ngIf="headerFacet && headerFacet.first">
<ng-content select="p-header"></ng-content>
</span>
<a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" href="#" role="button" (click)="close($event)" (mousedown)="onCloseMouseDown($event)">
<span class="pi pi-times"></span>
</a>
</div>
<div #content class="ui-dialog-content ui-widget-content" [ngStyle]="contentStyle">
<ng-content></ng-content>
</div>
<div class="ui-dialog-footer ui-widget-content" *ngIf="footerFacet && footerFacet.first">
<ng-content select="p-footer"></ng-content>
</div>
<div *ngIf="resizable" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"
(mousedown)="initResize($event)"></div>
</div>
`
})
export class MyDialogComponent extends Dialog {
ngOnInit(): void {
}
onScroll(evt) {
console.log(evt);
}
}