角度2服務之間的溝通，孩子和父母不工作？

我有自舉模式，其中我保存了一些數據，保存後我想在文本框中選中這些數據。 Modal在子組件中，並加載我已經在應用程序模塊的entryComponents中提到它。角度2服務之間的溝通，孩子和父母不工作？

現在爲了在這種情況下進行通信，我添加了服務將管理組件之間的通信。

這裏我的服務

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class EmitterService { 
    private events = new Subject(); 
    private eventSetSource = new Subject<any>(); 
    private eventCompletedSource = new Subject<any>(); 


    // Observable string streams 
    eventSet$ = this.eventSetSource.asObservable(); 
    eventCompleted$ = this.eventCompletedSource.asObservable(); 

    // Service message commands 
    set(obj: any) { 
    this.eventSetSource.next(obj); 
    }  
}

這裏是莫代爾/子組件：

import { EmitterService } from 'app/shared-services/emitter/emitter.service'; 

    @Component({ 
     selector: 'app-short-organization', 
     templateUrl: './short-organization.component.html', 
     styleUrls: ['./short-organization.component.css'], 
     providers: [SessionService, ContactOrganizationService, ToastService, EmitterService] 
    }) 
    export class ShortOrganizationComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel, OnInit { 

     title: string; 
     message: string; 
     public _formGrp: FormGroup; 

     constructor(dialogService: DialogService, 
     private _emitterService: EmitterService 
    ) { 
     super(dialogService); 
     _emitterService.eventCompleted$.subscribe(x => { 
      console.log(x); 
     }) 
     } 

     ngOnInit() { 
     } 


     onSubmit() { 
     let _userDetail = this.sessionService.getCurrentUser(); 
     var obj = { id: 0, value: 'xyz'}; 
     this._emitterService.set(obj);    
     }

父組件：

import { Component, OnInit,OnDestroy } from '@angular/core'; 
import 'rxjs/add/operator/takeUntil'; 
import { Subject } from 'rxjs/Subject'; 
import { ShortOrganizationComponent } from 'app/modules/manage-organization/short-organization/short-organization.component'; 
import { EmitterService } from 'app/shared-services/emitter/emitter.service'; 

@Component({ 
    selector: 'app-contact', 
    templateUrl: './contact.component.html', 
    styleUrls: ['./contact.component.css'], 
    providers: [ 
    EmitterService 
    ] 
}) 
export class ContactComponent implements OnInit,OnDestroy { 

    private ngUnsubscribe: Subject<void> = new Subject<void>(); 

    constructor( 
    private _emitterService: EmitterService 
) { 
    debugger 
    this._modalSubs = _emitterService.eventSet$.subscribe(
     x => { 
     debugger; 
     console.log(x); 
     this.onSaveSelect(x); 
     }, 
     error=>{ 
     debugger; 
     console.log(error); 
     } 
    ); 
    } 

    ngOnInit() { 
    } 
onSaveSelect(val) { 
    debugger   
    } 
    ngOnDestroy(): void { 
    this.ngUnsubscribe.next(); 
    this.ngUnsubscribe.complete(); 
    } 
} 

}

我在這裏呼籲使用ng2-bootstrap-modal dailog服務這個子組件：

openOrganizationModal() { 
    let disposable = this._dialogService.addDialog(ShortOrganizationComponent, { 
     title: 'Confirm title', 
     message: 'Confirm message' 
    }, { backdropColor: 'rgba(23, 19, 19, 0.5)' }) 
     .subscribe((x) => { 
     console.log(x) 
     }); 
    }

此代碼正在我的父組件中加載我的子組件，並且在某些按鈕單擊時調用此方法。

在設置值我的訂閱代碼在父母沒有被調用。這裏有什麼遺漏嗎？ ****我從應用程序複製它

來源

2017-08-31 Praveen Rawat

提供EmitterService只有父組件上（或@NgModule()），否則每個組件會得到自己的實例，這使得通信不可能的，因爲一個組件是在聽與其他用於發送事件的實例不同。

來源

2017-08-31 11:17:19

好的。我認爲在父母中提及它會更好，因爲在第二種情況下，它被添加到@NgModule中將使它爲所有父親孩子創建單個實例（如果我將它用作通信服務），並且在這種情況下設置值，但是說child1對於parent1將可用於parent2。我對嗎？或者我想像一個小白菜。 –

保持@NgModule中的EmitterService正常工作，但只在Parent中保持不起作用。正如我前面提到的我使用entryComponents加載子組件是不是因爲它而工作？我不確定在這裏 –

不確定'entryComponents'是什麼意思，你用viewContainerRef.createComponent（）來創建它嗎？我需要看到更多細節才能分辨出發生了什麼。如果這個組件實際上不是'提供者：[...]'中有服務的組件的子組件，那它就無法工作，它是如何作爲孩子添加的並不重要。 –

角度2服務之間的溝通，孩子和父母不工作？

回答

相關問題