延迟加载的模块在每次加载时创建父服务的多个实例

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(); 
    } 

} 

我希望这将解决您的问题。