遅延ロードされたモジュールは、毎回親サービスの複数のインスタンスを作成します。

Question

MainComponentからTestListComponentにナビゲートするたびに、TestListComponentコンストラクタが起動され、ObservableServiceの新しいインスタンスが作成されます。リンクをクリックすると、コンソールに重複したメッセージが表示されます。多分角張った問題、どんな助けですか？

main.module.ts

import { NgModule } from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import {MainRoutingModule} from "./main-routing.module"; 
    import {MainComponent} from './main.component'; 
    import {ObservableService} from "../../core/services/observable.service"; 

    @NgModule({ 
     imports: [ 
      BrowserModule, 
      MainRoutingModule,     
     ], 
     declarations: [MainComponent], 
     providers: [ObservableService], 
     bootstrap: [ 
      MainComponent 
     ] 
    }) 
    export class MainModule { } 

main.routing.module.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

export const routes: Routes = [ 
    { path: 'tests', loadChildren: 'angular/app/modules/test-list/test-list.module#TestListModule'}, 
    { path: '**', redirectTo: '' } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class MainRoutingModule {} 

observable.service.ts

import { Injectable } from '@angular/core'; 
import {Subject} from "rxjs/Rx"; 
import 'rxjs/add/operator/map' 


@Injectable() 
export class ObservableService { 

    // Observable string sources 
    private changeLanguageStatus = new Subject<Object>(); 

    // Observable string streams 
    changeLanguageStatus$ = this.changeLanguageStatus.asObservable(); 

    constructor(){} 

    /** 
    * Change language event 
    * @param params 
    */ 
    changeLanguageEvent(params: Object){ 
     this.changeLanguageStatus.next(params); 
    }   
} 

テストlist.module.ts

import { NgModule } from '@angular/core';  
import {TestListComponent} from "./test-list.component"; 

@NgModule({ 
    declarations: [ 
     TestListComponent 
    ] 
}) 
export class TestListModule {} 

テストlist.component.ts

import {Component} from '@angular/core'; 
import 'rxjs/Rx'; 
import {ObservableService} from "../../core/services/observable.service"; 

@Component({ 
    moduleId: module.id, 
    selector: 'st-test-list', 
    templateUrl: 'test-list.component.html' 
}) 

export class TestListComponent { 

    constructor(private observableService:ObservableService) { 
     observableService.changeLanguageStatus$.subscribe(
      data => { 
       console.log('Test', data); 
      }); 
    }  
} 

main.component.ts

import {Component, ViewChild} from '@angular/core'; 
import 'rxjs/Rx'; 

import {ObservableService} from "../../core/services/observable.service"; 

@Component({ 
    moduleId: module.id, 
    selector: 'st-main', 
    templateUrl: 'main.component.html'  
}) 

export class MainComponent {  
    constructor(private observableService:ObservableService) {} 

    changeLanguage(lang){ 
     this.observableService.changeLanguageEvent({type: lang}); 
    } 
} 

main.component.html

<a href="" (click)="changeLanguage('en')"></a> 

<!--Dynamic content--> 
<router-outlet></router-outlet> 

Answer 1

それはあなたがそれが作成され、あなたが戻って移動するとき、それが破壊され、ルーティングを経由してコンポーネントに移動したときにすることを期待される動作でなければなりません。私が知る限り、この問題はInfinite Observableと呼ばれているものを作成しているためです。つまり、言語を変更する場合は、そのイベントに登録してイベントの流れを待っています。 Observableから退会することは決してないので、それにサブスクライブされている関数は、コンポーネントの新しいインスタンスごとに有効です。したがって、rxjsはあなたのサブスクリプションの処分を処理しないため、あなた自身でそれを行う必要があります。

まず、ライフサイクルフックについてお読みください。 OnInitとOnDestroyのライフサイクルフックを確認してください。

使用ngOnInitがあなたの観察可能に加入し、そのようにから退会するngOnDestroyを使用する：

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ .... }) 

export class TestListComponent implements OnInit, OnDestroy 
{ 
    private _languageSubscription : Subscription; 

    ngOnInit(): void 
    { 
     this._languageSubscription = observableService.changeLanguageStatus$.subscribe(
     data => { 
      console.log('Test', data); 
     }); 
    } 

    ngOnDestroy() : void 
    { 
     this._languageSubscription.unsubscribe(); 
    } 

} 

私はこれがあなたの問題を解決することを願っています。