遅延ロード：観察可能な私の角度アプリで

Question

を購読していない、私は親コンポーネントを持つ：

console.component.html

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

routler-出口が2つのコンポーネントを読み込むことができます。 1つは熱心に読み込まれ、もう1つは遅延読み込みで読み込まれます。ここでルートが

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.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.component.tsに初期化され、観察が...私の子コンポーネントを遅延ロードでロードされたとき、（呼び出されることはありません）

を加入されることはありませんことに気づきましたより大きい

あなたはRxJS観測値が呼び出されない理由はありますか？

Answer 1

遅延ロードされたモジュールには独自のスコープのシングルトンサービスがあるため、SnackbarServiceのインスタンスが2つあることが原因と思われます。アプリケーションモジュールのような最高レベルのモジュールにサービスを移動して、問題が解決するかどうか確認してください。