Angular PrimeNG BlockUI属性
Angular PrimeNG是一个开源框架,拥有丰富的原生Angular UI组件,可用于出色的造型,这个框架用于制作响应式网站,非常容易。在这篇文章中,我们将学习如何在Angular PrimeNG中使用BlockUI属性。**我们还将学习这些属性,以及它们在代码中的语法。
BlockUI组件是用来封锁组件或整个页面的。
Angular PrimeNG BlockUI属性:
- blocked:它用于控制封锁的状态。它是布尔数据类型,默认值是false。
- target:它用于定义本地ng-template变量的名称,指的是另一个组件。它是字符串数据类型,默认值为文档。
- baseZIndex:它用于定义分层时使用的基础Z指数值。它是数字数据类型,默认值是0。
- autoZIndex:它用于是否自动管理分层。它是一个布尔数据类型,默认值为真。
- styleClass:它用于定义组件的风格类。它是字符串数据类型,默认值为false。
语法:
创建Angular应用程序和模块安装
第1步:使用以下命令创建一个Angular应用程序。
第2步:创建你的项目文件夹即appname后,使用以下命令移动到它。
第3步:在你给定的目录中安装PrimeNG。
项目结构:完成安装后,它将看起来像下面这样。
- 要运行上述文件,请运行以下命令。
例子1:这是一个基本的例子,展示了如何使用**Angular PrimeNG BlockUI属性。
- app.component.html:
- app.component.ts:
- app.module.ts:
输出:
例子2:这是另一个基本的例子,展示了如何使用**Angular PrimeNG BlockUI Properties。
- app.component.html:
- app.component.ts:
- app.module.ts:
输出: