angular 2 子与父子之间的通信服务无法正常工作？

Question

我有 bootstrap 模式，我在其中保存了一些数据，保存后我想在文本框中选择该数据。 Modal 在子组件中并加载我在应用程序模块的 entryComponents 中提到的它。

现在为了在这种情况下进行通信，我添加了服务来管理组件之间的通信。

这是我的服务

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 调用带有 daillog 服务的子组件：

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

此代码正在我的父组件中加载我的子组件，并且在单击某些按钮时调用此方法。

我在父级订阅的代码没有被调用。这里有什么遗漏吗？ **** 我从应用程序中复制了它

Answer 1

在父组件上（或在@NgModule()中）提供EmitterService仅，否则每个组件将获得自己的实例，无法通信，因为一个组件监听的实例与另一个组件用来发送事件的实例不同。

angular 2 子与父子之间的通信服务无法正常工作？

angular 2 service to communicate between child and parent not working?

angular2-services

angular