延遲加載的模塊在每次加載時創建父服務的多個實例

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

應當預期的行爲，當你通過路由它創建導航到一個組件，當你導航回到被摧毀。據我所知，你正在經歷這個問題，因爲你正在創建所謂的無限可觀察，即你正在訂閱它並等待事件流，在你的情況下改變語言。因爲您永遠不會取消訂閱您的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(); 
    } 

} 

我希望這將解決您的問題。