在我的Angular App中,我有一个父组件:
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 observable?
答案 0 :(得分:4)
我怀疑它是因为延迟加载的模块有自己的单例服务范围,意味着你的SnackbarService有两个实例。尝试将服务移动到最高级别的模块,如应用程序模块,看看是否能解决问题。
答案 1 :(得分:-1)
延迟加载不会影响对任何服务的订阅或可观察的订阅。 该问题可能与您在服务中使用的主题的类型有关。
我认为您应该使用ReplaySubject
而不是Subject