加载指令

您可能需要暂时屏蔽用户界面的某一部分并显示加载指示器；LoadingDirective指令可为您实现此功能。该指令由@abp/ng.theme.shared包提供。

快速开始

要在HTML模板中使用LoadingDirective，需要先将其导入组件：

// ...
import { LoadingDirective } from '@abp/ng.theme.shared';

@Component({
  // ...
  imports: [ LoadingDirective ]
  // ...
})
export class SampleComponent {}

使用方法

LoadingDirective使用简单。该指令的选择器是**abpLoading**。通过向HTML元素添加abpLoading属性，当值为true时即可为该元素激活加载指令。

查看使用示例：

<div [abpLoading]="true">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
    corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
    cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
    impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
    architecto.
</div>

包含长文本的<div>元素已添加abpLoading属性以激活加载指令。

查看效果：