懒加载：未订阅的可观察对象

Question

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

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

可以加载两个子组件，其中一个是急切加载的，另一个是使用惰性加载加载的。以下为路由文件：

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 组件会初始化一个可观察对象，当被调用时，该对象将在组件上显示一条信息。

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 可观察对象没有被调用？

- onedkr

Answer 1

我猜测这是由于惰性加载模块具有其自身的单例服务范围，这意味着你的SnackbarService存在两个实例。尝试将该服务移动到最高级别的模块（例如app模块）中，看看是否可以解决问题。

- Fan Cheung

---

我的控制台组件也是延迟加载的（也许这就是问题所在？）。我将我的消息条组件移到了最高层级（应用程序），然后它就正常工作了。感谢您的回答 ;) - onedkr

谢谢，官方文档中应该有一些说明。https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service - Xin Meng

Answer 2

我看到你想在你的组件加载后获取值，因此不应该使用subject，而是应该使用BehaviorSubject。它将向新的订阅者发出最后一个值。

- Ankit Pandey

Answer 3

当我在myLazyLoad模块中调用服务[myService]时，发现了一个问题，如果您删除我的工作的调用，则建议阅读此链接Angular 2＆RxJS：Subject.next在某些情况下无法正常工作。

- ALEJANDRO HERNANDEZ

---

由于当前的回答写得不清楚，请进行编辑以添加额外细节，以帮助其他人理解该回答如何解决所提出的问题。您可以在帮助中心找到有关如何撰写好回答的更多信息。 - Community

尽管这个链接可能回答了问题，但最好在此处包含答案的必要部分，并提供参考链接。如果链接页面改变，仅链接的答案可能会变得无效。-【来自审核】 - Stanley

Answer 4

懒加载不会影响对任何服务或可观察对象的订阅。

问题可能与您在服务中使用的Subject类型有关。

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

- Srinath Kamath