企业官网建设流程全解析

• UI组件
• 前端

ngx-bootstrap 是 Angular 生态中基于 Bootstrap 3/4 的 UI 组件库，其 Buttons 模块通过btnCheckbox、btnRadio、btnRadioGroup三条指令让普通按钮呈现复选框、单选按钮乃至"可取消选中"的单选行为。本篇以 docs/spec/buttons/buttons.examples.basic.use-case.md 这一用例规格文档为骨架，逐条拆解 "Buttons Basic example" 场景的参与者、范围、目标与成功路径，并结合仓库中演示页、指令源码与单元测试，讲清楚"Single Button"从规格到实现的完整链路，帮助读者在 ngx-bootstrap 文档站中快速定位该示例，并在自己的 Angular 工程里复现同样的基础按钮。

用例规格速览：谁、在哪、要什么

原规格文档 buttons.examples.basic.use-case.md 用标准 use case 模板定义了该场景，核心要素如下：

该场景描述的"基础按钮"不含任何复选框、单选或表单绑定逻辑，仅验证 ngx-bootstrap 文档站中 Buttons 模块的入口示例是否按预期呈现、可交互，属于功能验收与演示可用性的最小闭环。

主成功场景逐步拆解

步骤 1：用户打开 Buttons demo 页面

在 ngx-bootstrap 文档站中，Buttons 的演示入口由ButtonsSectionComponent承载，其路由在 demo-buttons.routes.ts 中定义为空路径直接指向该组件：

import { ButtonsSectionComponent } from './buttons-section.component'; export const routes = [{ path: '', component: ButtonsSectionComponent }];

该组件通过 buttons-section.component.html 渲染<demo-section>外壳，并将组件目录数据demoComponentContent交由docs-section输出，页面顶部即呈现 Buttons 总览：

"There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked."

这句话点明了 Buttons 模块的设计本质：底层只有若干指令，由它们组合出复选框/单选按钮的交互语义。

步骤 2：用户点击 Basic 子菜单（变体：滚动到 Basic 子菜单）

"Basic" 示例的登记位置在 buttons-section.list.ts 的 Overview 分区中，是所有按钮示例的第一项：

{ title: 'Basic', anchor: 'basic', component: require('!!raw-loader!./demos/basic/basic.ts'), html: require('!!raw-loader!./demos/basic/basic.html'), outlet: DemoButtonsBasicComponent }

anchor: 'basic'生成了页内锚点，因此用户既可以通过点击子菜单跳转（主成功场景步骤 2），也可以通过页面滚动直达（变体2*. User scrolls to Basic sub-menu）——两条路径最终都落到同一个示例实例DemoButtonsBasicComponent。

步骤 3：用户看到 1 个文本为 "Single Button" 的按钮

规格要求页面上呈现一个、文本为"Single Button"的按钮。演示模板 basic.html 与规格完全一一对应：

<button type="button" class="btn btn-primary"> Single Button </button>

该按钮使用了 Bootstrap 的.btn与.btn-primary样式类，type="button"显式声明避免表单提交副作用。规格强调"1 个按钮"，正是为了验证 Basic 示例在视觉上与后续 Checkbox、Radio 等"按钮组"示例形成最小对照：一个不带任何状态切换语义的普通主色按钮。

步骤 4：按钮应该可点击

对应演示组件 basic.ts 声明了组件选择器与模板，本身不含任何拦截点击的逻辑：

@Component({ // eslint-disable-next-line @angular-eslint/component-selector selector: 'demo-buttons-basic', templateUrl: './basic.html', standalone: false }) export class DemoButtonsBasicComponent {}

从源码结构看，DemoButtonsBasicComponent是"空壳"组件，没有任何@HostListener或(click)绑定，因此原生<button>的点击行为原样保留——这正是规格"可点击"断言背后的实现保证。组件以standalone: false声明，并被纳入演示模块的declarations数组，由 buttons.module.ts 统一编排（其中同时导入了ButtonsModule供其他示例使用）。

从规格走向实战：在自己的工程中复现 "Single Button"

规格的 Scope 是"Ngx-bootstrap DEMO"，但"展示一个基础按钮"同样适用于真实业务工程。官方演示页的安装说明 usage.md 给出了两种接入方式。

方式一：独立组件用法（Standalone）

import { ButtonsModule } from 'ngx-bootstrap/buttons'; @Component({ imports: [ ButtonsModule, ... ] }) export class AppComponent(){}

方式二：模块用法（NgModule）

import { ButtonsModule } from 'ngx-bootstrap/buttons'; @NgModule({ imports: [ButtonsModule,...] }) export class AppModule(){}

接入后，将演示模板的三行 HTML 拷贝到任意组件模板即可得到与文档站一致的 "Single Button"：

<button type="button" class="btn btn-primary"> Single Button </button>

若使用 Angular CLI 脚手架项目，还可通过ng add ngx-bootstrap --component buttons（见 buttons-section.list.ts 中 Installation 分区的importInfo）按组件粒度引入。

源码级纵深：Basic 之外，指令如何让按钮"活"起来

Basic 示例刻意保持朴素，而同一模块中的其余示例揭示了按钮行为能力的来源——三个独立指令全部位于 src/buttons，并通过 buttons.module.ts 打包导出：

@NgModule({ imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] }) export class ButtonsModule {}

public_api.ts对外公开了ButtonsModule与三条指令，说明"基础按钮"与"可切换按钮"之间只差一个指令属性。

btnCheckbox：让按钮具备复选框语义

button-checkbox.directive.ts 通过@HostBinding同时绑定class.active与attr.aria-pressed，实现"选中态样式 + 无障碍状态"；点击事件由onClick()处理：禁用时直接返回，否则翻转状态并回调onChange：

@HostListener('click') onClick(): void { if (this.isDisabled) { return; } this.toggle(!this.state); this.onChange(this.value); }

它实现了ControlValueAccessor，支持模板驱动与响应式表单；btnCheckboxTrue/btnCheckboxFalse输入允许自定义真/假值（默认true/false），例如演示测试中的btnCheckboxTrue='1' btnCheckboxFalse='0'。

btnRadio与btnRadioGroup：单选按钮及可取消行为

button-radio.directive.ts 通过isActive判定btnRadio() === this.value并绑定class.active与aria-checked；uncheckable输入允许再次点击已选中按钮将其置空。当指令嵌套于btnRadioGroup容器（button-radio-group.directive.ts）内时，组内互斥、共享value，并自动补充 WAI-ARIA radio group 模式：容器role="radiogroup"、子项role="radio"，且支持方向键在组内移动焦点（selectNext/selectPrevious监听 ArrowRight/ArrowDown/ArrowLeft/ArrowUp）。

从源码结构可以推断，这正是 buttons-section.list.ts 中 Radio with radio group 示例所述"组自动进入页面 tab 序、箭头键切换、aria-checked按状态更新"的实现出处。同文件中的 Disabled Buttons、Checkbox with Reactive Forms、Radio with Reactive Forms、Uncheckable Radio、Custom checkbox value 等 9 个示例（见 demos/index.ts 的DEMO_COMPONENTS），均围绕这三条指令的不同组合展开。

用测试验证规格：行为即断言

规格中的每条断言（出现 1 个按钮、可点击、可交互）在 button.directive.spec.ts 中都有对应的自动化验证。测试模板同时覆盖了默认值切换、自定义真/假值绑定、禁用不可点击、按钮组初始态等行为，例如"点击切换默认模型值"断言：

• 初始singleModel = false时，#default按钮不含active类；
• 点击后singleModel变为true且按钮获得active类；
• 再次点击恢复false并移除active类。

测试还专门对OnPush变更检测策略做了双份覆盖（通过TestBed.overrideComponent注入ChangeDetectionStrategy.OnPush），验证指令在性能优化场景下的表现一致。运行方式见 src/buttons/README.md：执行nx test buttons即可。

小结

从规格到代码，buttons.examples.basic用例验证的是一条最小闭环：文档站 Buttons 页 → Basic 子菜单 → 单个 "Single Button" → 可点击。这条链路的实现证据分别落在 buttons-section.list.ts（示例登记与锚点）、basic.ts 与 basic.html（零逻辑演示组件）以及 buttons.module.ts（模块导出）中。理解这个基础示例，也就拿到了进入整个 Buttons 指令体系的门票——后续的复选框、单选组、可取消单选与响应式表单示例，都只是在这条朴素的<button>之上叠加一层指令而已。

• UI组件
• 前端