Question

我有自举模式，我保存了一些数据，保存后我想在文本框中选择数据。 Modal在子组件中并加载我在app module的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使用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)
      });   
  }

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

在值集上，我的父订阅代码未被调用。这里有什么遗漏？ ****我已经从应用程序中复制了它

Answer 1

在父组件（或EmitterService）上提供@NgModule() ，否则每个组件都会获得自己的实例，这使得无法进行通信，因为一个组件正在侦听与另一个用于发送事件的实例不同的实例。

角度2服务，孩子和父母之间的沟通不工作？

1 个答案: