ng-block-ui 开源项目安装与使用指南

1. 项目目录结构及介绍

ng-block-ui 是一个用于Angular应用程序的阻塞UI组件库，帮助在执行耗时操作时显示加载指示器或阻止用户界面交互。下面是该仓库的基本目录结构概述：

• src: 核心源代码所在目录。
  • lib: 包含了库的所有主要代码，如服务、指令等。
  • public-api.ts: 定义了对外公开的API接口。
  • package.json: 控制依赖和构建脚本。
• docs: 可能包含项目文档或示例说明。
• demo: 提供的演示应用或示例代码，帮助理解如何使用。
• tests: 单元测试和集成测试相关文件。
• README.md: 项目的主要说明文件，通常包括安装步骤、快速入门等。

2. 项目的启动文件介绍

在ng-block-ui作为依赖被安装到你的Angular项目之后，它本身不直接提供一个“启动文件”给终端用户。不过，在你的Angular应用中，你需要修改以下几个关键点来“启动”这个库：

• app.module.ts (或者你的主模块文件): 引入并添加BlockUIModule.forRoot()到你的imports数组中，这是初始化ng-block-ui库的关键步骤。

import { BlockUIModule } from 'ng-block-ui';

@NgModule({
  imports: [
    ...,
    BlockUIModule.forRoot()
  ],
  ...
})
export class AppModule { }

3. 项目的配置文件介绍

对于ng-block-ui，配置主要通过模块导入的方式进行。然而，如果你需要自定义配置（比如全局默认的阻塞消息或者其他行为），你可以在你的应用中以特定方式使用服务或利用提供的API来进行设置。这通常不是通过单独的配置文件完成，而是通过在你的主模块或其他合适的组件内调用服务方法或使用装饰器来实现。

例如，如果你想改变默认的阻塞消息，你可能需要注入NgBlockUI服务并在其上设置相应的属性或使用装饰器指定不同的块UI实例。

import { Component, OnInit } from '@angular/core';
import { NgBlockUI } from 'ng-block-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private blockUI: NgBlockUI) {}

  ngOnInit(): void {
    this.blockUI.config({ message: '自定义加载提示...' });
  }
}

请注意，具体的配置选项应参照最新的库文档，因为这些细节可能会随版本更新而变化。始终推荐查看仓库的最新README或官方文档获取最准确的信息。