如何创建双向服务功能

Question

我有一个警报服务，它与显示弹出窗口的警报组件通信工作组件。 我像 EventEmitters 那样工作：

alert.service.ts

export class AlertService {
  @Output() alert: EventEmitter<any> = new EventEmitter()

  sendAlertCont(data: any) {
        this.getAlert.emit(data)
    }
}

所以，在任何组件中，我都会调用服务函数来激活警报组件

any.component.ts

export class AnyComponent {

constructor(private _alert: AlertService){}

clickedFunction(){
   this._alert.sendAlertCont('You don't have permissions')
}

alert.component.ts

export class AlertComponent implements OnInit {

constructor(private _alert: AlertService){}

ngOnInit(){
   this._alert.alert.subscribe(data => {
        this.alerta = data
        $('app-alert').fadeToggle()
    })
}

问题是：

如何执行名为sendAlertCont() 的服务函数在data 中返回响应发送选项并在发送警报的组件中获取响应：

AnyComponent：发送数据 => AlertService：活动警报 => AlertComponent：显示警报和选项

然后

AlertComponent：发送响应 => AlertService：获取并发送响应 => AnyComponent：接收响应

但都在同一个函数中。可以吗？

我在想像 Observable、Promise o Async Function 这样的东西：

1. this._alert.sendAlertCont('You don't have permissions').then(...)
2. var res = await this._alert.sendAlertCont('You don't have permissions')
3. this._alert.sendAlertCont('You don't have permissions').suscribe(...)

Answer 1

你可以这样做：

alert.service.ts

export class AlertService {
  showAlert$ = new Subject<string>();
  responeAlert$ = new Subject<string>();

  alert(alert: string): Observable<any> {
    this.showAlert$.next(alert);
    return this.responeAlert$;
  }
}

any.component.ts

export class AnyComponent  {
  constructor(private alertService: AlertService) { }

  alert(): void {
    this.alertService.alert('You don\'t have permissions').subscribe((result) => {
      this.alertResult = result;
    });
  }
}

alert.component.ts

export class AlertComponent implements OnInit  {
  constructor(private alertService: AlertService) { }

  ngOnInit() {
    this.alertService.showAlert$.subscribe(alert => {
      // code for displaying this component
    })
  }

  close(result: string): void {
    this.alertService.responeAlert$.next(result);
  }
}

StackBlitz DEMO

Answer 2

我喜欢使用BehaviorSubject 在组件和服务之间进行通信。你的AlertService 可能是这样的：

  alert = new BehaviorSubject<string>("");
  alertResponse = new BehaviorSubject<string>("");

  sendAlert(message: string) {
    this.alert.next(message);
  }

  sendResponse(message: string) {
    this.alertResponse.next(message);
  }

然后在AnyComponent你可以发送警报：

  sendAlert() {
    this.alertService.sendAlert("You don't have permissions.");
  }

在AlertComponent 中显示警报消息并等待用户确认：

  alertMessage: string;

  constructor(private alertService: AlertService) {
    this.alertService.alert.subscribe(res => this.alertMessage = res);
  }

  reply(message: string) {
    this.alertService.sendResponse(message);
  }

再次在AnyComponent 订阅并显示来自 AlertComponent 的用户响应：

  alertResponse: string;

  constructor(private alertService: AlertService) {
    this.alertService.alertResponse.subscribe(res => this.alertResponse = res);
  }

查看我根据您的要求制作的 Stackblitz：https://stackblitz.com/edit/angular-opqhj4