延迟加载：Observable 未订阅

Question

在我的 Angular 应用程序中，我有一个父组件 :

console.component.html

<div class="main">
  <ibe-snackbar></ibe-snackbar>
  <router-outlet></router-outlet>
</div>

routler-outlet 可以加载两个子组件。一个是急切加载，另一个是延迟加载。这是路线文件

console.component.routes

const ConsoleRoutes: Routes = [
  { path: 'console', component: ConsoleComponent, data: {context : CONSOLE_CONTEXT},
    children: [
      { path: "projects", component: ProjectsListComponent, data : {context : PROJECT_CONTEXT}}, --> Loaded eagerly
      { path: "projects/:projectId/users", loadChildren: "./users/users.module#UsersModule" }, ---> Loaded laziness
      { path: '', redirectTo: "projects", pathMatch: "full" },
    ]
  }
];

export const ConsoleRouting: ModuleWithProviders = RouterModule.forChild(ConsoleRoutes);

snackbar 组件初始化一个 observable，当它被调用时会在组件上显示一条消息。

snackbar.service.ts

export class SnackbarService {
  private subject = new Subject<any>();
  constructor() { }

  showSnackbar(message, type) {
    // Treatment
    this.subject.next(snackbarInfos);
  }

  getSnackbarObservable(): Observable<any> {
    return this.subject.asObservable();
  }
}

sanckbar.component.ts

export class SnackbarComponent implements OnInit {

  constructor(private snackbarService: SnackbarService, private translate: TranslateService) { }

  ngOnInit() {
    this.snackbarService.getSnackbarObservable()
    .subscribe(snackbar => {
      this.snackbar = snackbar;
      this.display();
    });
  }
}

所以子组件调用 snackbar 服务将信息发送到 observable。

我注意到在 snackbar.component.ts 中初始化的 observable 从未被订阅（从未被调用），当我的子组件加载延迟加载时...

然而，当子组件被提前加载时它工作得很好

您知道为什么不调用 RxJS 可观察对象吗？

Answer 1

我怀疑是因为懒加载模块有自己的单例服务范围，意味着你的 SnackbarService 有两个实例。尝试将服务移动到最高级别的模块，例如应用程序模块，看看是否可以解决问题。

Answer 2

延迟加载不会影响对任何服务或可观察对象的订阅。问题可能与您在服务中使用的 Subject 类型有关。

我认为你应该使用 ReplaySubject 而不是 Subject

Answer 3

当我将服务调用到 provider:[myService] 到 myLazyLoad 模块时，如果您删除对我的作品的调用，我发现了一个问题。推荐阅读这篇

延迟加载：Observable 未订阅

Lazy loading : Observable not subscribed

lazy-loading

rxjs

angular