AngularBloc 在鸿蒙 Web 端的适配与实战指南

3.2 基础计数器组件示例

// counter_cubit.dart - 纯业务逻辑
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  void increment() => emit(state + 1);
}

// counter_component.dart - 鸿蒙 Web 组件
@Component(
  selector: 'ohos-counter',
  template: '''
    <div>
      <h1>鸿蒙计数器: {{ count | async }}</h1>
      <button (click)="increment()">增加进度</button>
    </div>
  ''',
  pipes: [BlocPipe],
)
class CounterComponent {
  final CounterCubit count;
  CounterComponent(this.count);
  void increment() => count.increment();
}

四、典型应用场景

4.1 鸿蒙分布式看板：实时数据流协同

在展示鸿蒙集群状态的仪表盘中，利用 angular_bloc 实时接收底层的推送流，无需手动触发 detectChanges() 即可实现 UI 的丝滑更新。

4.2 大型鸿蒙表单：分步状态管理

利用 BLoC 处理复杂的业务校验逻辑，在 Angular 组件中仅负责展现，实现代码的高内聚、低耦合。

五、OpenHarmony 平台适配挑战

5.1 异步流的生命周期管理 (Critical)

在鸿蒙 Web 开发中，组件的频繁销毁与重构。angular_bloc 底层依赖 StreamSubscription。

• 适配建议：务必配合 BlocPipe 使用，它会自动处理流的取消订阅（Auto Unsubscribe）。如果使用手动订阅，请确保在组件的 ngOnDestroy 钩子中执行关闭操作，防止由于鸿蒙 Webview 内存积压导致的整体卡顿。

5.2 平台差异化处理 (Zone 区域管理)

AngularDart 运行在 NgZone 之中。在鸿蒙端处理来自桌面消息总线或 WebSocket 的外部事件时，如果变化未能正确反映在 UI 上。建议显式在 zone.run() 内执行 BLoC 的 emit 操作，以确保触发鸿蒙应用的最优变更检测链路。

六、综合实战演示

// 鸿蒙管理端入口模块
@GenerateInjector([
  FactoryProvider(CounterCubit, createCounterCubit),
])
final InjectorFactory ohosAppInjector = ohos_app_injector_generated.ohosAppInjector;

void main() {
  bootstrap(
    ng.AppComponentNgFactory,
    createInjector: ohosAppInjector,
  );
}

七、总结

angular_bloc 是鸿蒙大型 Web 系统迈向工业级的阶梯。它将 BLoC 模式的'确定性'与 Angular 框架的'组件化'完美融合。在构建高性能且具备高度可维护性的鸿蒙 Web 解决方案时，它是无出其右的架构首选。

知识点回顾：

1. BlocPipe 是连接业务流与 HTML 模板的关键桥梁。
2. 将逻辑锁定在 BLoC 中可实现鸿蒙 Native 与 Web 的资产共享。
3. 自动生命周期回收机制确保了鸿蒙 Web 端长效运行的稳定性。