2017-06-21 7 views
0

の間でサービスを共有する方法、私は独立して実行している2つの異なるモジュール(@ NgModule)を持って、今私は彼らがお互いに通信し、data.the 2つのモジュールは遅延ロードされます。 Module2のためにModule1の中のサービスの変更を反映私のアプリケーションでangular2の2つのモジュール

+0

遅延ロードされたモジュールがforChildされている(以下に示すように、必要とされる場合、それをキャプチャする –

+0

ルックaを有します私の答え[ここ](https://stackoverflow.com/a/46243224/1683040)。 – LeonardoX

答えて

0

import { CommonModule } from '@angular/common'; 

import { SharedService } from './shared.service'; 

@NgModule({ 
    imports: [ 
     FormsModule, 
     CommonModule 
    ], 
    exports: [ 

    ] 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [SharedService] 
     }; 
    } 
} 

以下のようにプロバイダー配列にSharedModuleと注入SharedServiceを作成し、

import { Injectable, Inject, EventEmitter } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Subject } from 'rxjs/Subject'; 


@Injectable() 
export class SharedService { 


    public bookTitleOrAuthorSearchEvent = new EventEmitter<string>(); 


    } 
bookTitleOrAuthorSearchEvent持つEventEmitterで、以下のようにSharedServiceを作成します。

あなたのモジュールの構成要素のいずれかで
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 

import { SharedModule } from './modules/shared/shared.module'; 



@NgModule({ 
    declarations: [ 
    AppComponent, 
    //.. 
    ], 
    imports: [ 
    //.. 
    SharedModule.forRoot() 
    ], 
    providers: [ 
    //... 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

と注入sharedServiceの下に示されており、sharedServiceのインスタンスは、すべてのモジュールのすべてのコンポーネントで利用可能で、あなたが持つEventEmitterを使用することができるようforRoot用としてapp.moduleする

と注入SharedModuleまたはBehaviorSubject)データを放出し

import { Component, OnInit, DoCheck, ViewEncapsulation } from '@angular/core'; 
import { SharedService } from './../shared/shared.service'; 

@Component({ 
    selector: 'app-anytime-lib', 
    templateUrl: './anytime-lib.component.html', 
    styleUrls: ['./anytime-lib.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class AnytimeLibComponent implements OnInit, DoCheck { 

    constructor(private sharedService: SharedService) { 

    } 

    ngOnInit() { 
    this.clearSession(); 
    } 
    clearSession() { 
    // this.sharedService.removeSessionItem('userInfo'); 
    } 

    ngDoCheck() { 
    this.sharedService.bookTitleOrAuthorSearchEvent.subscribe((data) => { 
     console.log('Emitted data', data); 
    }); 
    } 

}

関連する問題