Angular 拥有一个风格简约的Priming BlockableUI接口组件
我正在尝试使用Priming block UI组件来阻止一个面板。该示例使用p-panel作为包装器,我将其实现为:Angular 拥有一个风格简约的Priming BlockableUI接口组件,angular,primeng,Angular,Primeng,我正在尝试使用Priming block UI组件来阻止一个面板。该示例使用p-panel作为包装器,我将其实现为: <p-blockUI [blocked]="blockUI" [target]="pnl"></p-blockUI> <p-panel #pnl [showHeader]="false"> <div [class]="myPanelClass" *ngIf="data?.IsVisible">
<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-panel会因为p-panel的样式而丢掉一切。是否还有另一个组件可以像简单的“div”一样使用?我认为唯一的方法是创建自己的组件,实现
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];
}
}
从'priming/priming'导入{BlockableUI};
@组成部分({
选择器:“可阻止的div”,
模板:`
`
})
导出类BlockableDiv实现BlockableUI{
@Input()样式:任意;
@Input()类:任意;
构造函数(专用el:ElementRef){
}
getBlockableElement():HtmleElement{
返回此.el.nativeElement.children[0];
}
}
归功于:为自定义
BlockableUI设置预处理功能目前仅以这种方式工作
<p-blockUI [target]="pnl" [blocked]="blockedPanel">
<i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #pnl header="Panel Header">
Content of Panel
</p-panel>
小组内容
无论您想要阻止什么内容。在p面板下使用,并相应地使用p面板id
这在公共关系下起作用
在“打底”下面的“^9.1.3”