Как создать двухстороннюю сервисную функцию angular - PullRequest
Новая
       17

Как создать двухстороннюю сервисную функцию angular

0 голосов
/ 16 января 2020

У меня есть служба оповещений, которая связывает рабочие компоненты с компонентом оповещения, который отображает всплывающее окно. Я работаю с 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 : активный Alert => AlertComponent : показать предупреждение и опции

, а затем

AlertComponent : отправить ответ => AlertService : получить и отправить ответ => AnyComponent : получить ответ

, но все в одной и той же функции , Возможно ли это?

Я думал о чем-то похожем на Observable, Promise o Asyn c Функция вроде:

  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(...)

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Вы можете сделать это следующим образом:

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

1 голос
/ 16 января 2020

Мне нравится использовать 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

...