鸿蒙 Web 生态下 angular_bloc 状态管理适配实战

// 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();
}

注意这里使用了 BlocPipe 来自动处理流的变化，这样就不需要手动触发 detectChanges()。

常见应用场景

实时数据流协同

在展示鸿蒙集群状态的仪表盘中，利用 angular_bloc 实时接收底层的推送流。无需手动触发变更检测，UI 就能丝滑更新。

大型表单管理

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

平台适配注意事项

异步流的生命周期管理

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

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

Zone 区域管理

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

完整示例

这是鸿蒙管理端的入口模块配置：

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

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

总结

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

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