我们有一种情况,我们有一个根模块和相应的根存储,以及多个功能模块和它们自己的功能存储.

我们需要不同的功能模块来分派根存储操作,从而更新根存储中的状态.

我知道每个功能状态都可以访问根状态,但我想知道是否有方法以不同的方式进行模块间通信?

我想要避免的是对根模块的直接依赖.

那么,有没有其他机制可以在模块之间交换信息呢?

PS. 模块是延迟加载的.

推荐答案

providedIn: root创建服务(不要在任何地方导入这个服务!),使用变量进行模块之间的通信,如果需要调用方法,需要使用EventBus using Subject on a service (not by me!)我们可以订阅侦听器并从位于不同模块中的两个组件发出事件,只要它们位于同一Angular 应用程序中,就可以使用此方法进行自由通信!

如果您在根目录中提供了ProvidedIn,则服务将自动在根目录中应用,无需导入!

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ConsoleData } from './ConsoleData';

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  sharedVariable = '';
  private subject$ = new Subject();

  emit(event: ConsoleData) {
    this.subject$.next(event);
  }

  on(event: string, action: any): Subscription {
    return this.subject$
      .pipe(
        filter((e: ConsoleData) => e.name == event),
        map((e: ConsoleData) => e.value)
      )
      .subscribe(action);
  }
  constructor() {}
}

尽管所提供的StackFlitz不是延迟加载的,但是该概念适用于相同的,

stackblitz

Angular相关问答推荐

在Angular 17中加载页面时打开打印对话框

如何避免使用CSS动画制作的幻灯片中闪烁?

PrimeNG面包屑组件生成奇怪的&

如何动态呈现组件并以Angular 访问它们的方法?

向Anguar 17项目添加服务以启动和停止Loader-NGX-UI-Loader

选中/取消选中-复选框未正确返回TRUE或FALSE

如何将角17中的嵌套组件与独立组件一起使用?

当信号的值发生变化时,模板不会更新

ngrx 效果等到从初始值以外的其他状态收到响应

在生产模式下使用带Angular 的 livekit

大型 Angular 12 应用程序 - 我如何管理 js 文件

Angular 重新渲染仅使用ngrx在表中更改的行

为什么 AngularFire .set() 永远等待响应并且不继续?

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

如何在 Angular2 中的所有请求的请求标头中发送Cookie?

Angular 2 Material Design 组件是否支持布局指令?

为什么 *ngIf 不适用于 ng-template?

如何从materialAngular使用分页器?

ng-template 上的 *ngFor 不输出任何内容

Angular ngClass 和单击事件以切换类