在我的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 可观察对象没有被调用?