拥有一个具有最小风格的 primeng BlockableUI 接口组件

Question

我正在尝试使用 primeng block UI 组件来阻止一个面板。该示例使用 p-panel 作为包装器，我是这样实现的：

    <p-blockUI [blocked]="blockUI" [target]="pnl"></p-blockUI>
    <p-panel #pnl [showHeader]="false">
        <div [class]="myPanelClass" *ngIf="data?.IsVisible">
            <p-card [style]="{'width': '100%', 'height': '365px', 'margin-top': '10px'}">
                <app-component></app-component>
            </p-card>
        </div>
    </p-panel>

问题是，在我现有的“div”周围添加 p 面板会因为 p 面板的样式而导致一切混乱。是否有另一个组件可以像一个简单的“div”一样使用？

Answer 1

我认为唯一的方法是创建自己的实现BlockableUI接口的组件：

import { BlockableUI } from 'primeng/primeng';

@Component({
    selector: 'blockable-div',
    template: `        
        <div [ngStyle]="style" [ngClass]="class" ><ng-content></ng-content></div>
    `
})
export class BlockableDiv implements BlockableUI {

    @Input() style: any;
    @Input() class: any;

    constructor(private el: ElementRef) {
    }

    getBlockableElement(): HTMLElement { 
        return this.el.nativeElement.children[0];
    }

}

致谢： https: //github.com/primefaces/primeng/issues/2003