Angular PrimeNG BlockUI组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用BlockUI组件。

BlockUI组件：它用于阻止组件或整个页面。

属性：

• blocked : 它用于控制阻塞状态。它是布尔数据类型，默认值是false。
• target : 它用于定义本地ng-template变量的名称，指向另一个组件。它是字符串数据类型，默认值为文档。
• baseZIndex : 它用于定义分层中使用的基础Z指数值。它是数字数据类型，默认值是0。
• autoZIndex : 它用于是否自动管理分层。它是布尔数据类型，默认值为true。
• styleClass : 它用于定义组件的风格类别。它是字符串数据类型，默认值是false。

Styling:

• p-blockui：它是遮挡元素。
• p-blockui-document：它是全屏模式下的遮挡元素。

创建Angular应用程序和模块安装。

• 第1步：使用以下命令创建一个Angular应用程序。

     ng new appname

• 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

     cd appname

• 第3步：在你给定的目录中安装PrimeNG。

    npm install primeng --save
    npm install primeicons --save

项目结构：它将看起来像如下。

例子1：这是一个基本的例子，展示了如何使用blockUI组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG BlockUI Component</h5>
<p-blockUI [blocked]="gfg"></p-blockUI>
  
<button
  type="button"
  pButton
  pRipple
  label="Click here to block"
  (click)="geeks()">
</button>

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: boolean = false;
  
  geeks() {
    this.gfg = true;
    setTimeout(() => {
      this.gfg = false;
    }, 3000);
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BlockUIModule } from "primeng/blockui";
import { PanelModule } from "primeng/panel";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BlockUIModule,
    ButtonModule,
    PanelModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

例子2：在这个例子中，我们将知道如何在消息组件中阻止一个面板。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG BlockUI Component</h5>
  
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Block"
  (click)="gfg=true">
</button>
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Unblock"
  (click)="gfg=false">
</button>
  
<p-blockUI [target]="geeks" [blocked]="gfg">
  <i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #geeks header="BlockUI" styleClass="p-mt-4">
  <p class="p-m-0">
    Angular PrimeNG is a framework used with 
    angular to create components with
    great styling and this framework is very 
    easy to use and is used to make
    responsive websites.
  </p>
  
</p-panel>

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: boolean = false;
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BlockUIModule } from "primeng/blockui";
import { PanelModule } from "primeng/panel";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BlockUIModule,
    ButtonModule,
    PanelModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出: