(IN) Правильное использование наблюдаемого / экземпляра в машинописном тексте (Angular) - PullRequest
Новая
       71

(IN) Правильное использование наблюдаемого / экземпляра в машинописном тексте (Angular)

0 голосов
/ 06 августа 2020

Цель состоит в том, чтобы пользователь нажал кнопку, затем извлекли некоторые данные с сервера и, наконец, перенаправили пользователя на основе полученных данных.

В этом контексте клиент нажимает на кнопка, которая вызывает метод «создать» из класса Компонента А. При первом щелчке мыши переменная foo не определена, и поэтому перенаправление не выполняется. Однако при втором щелчке это уже не так, и, таким образом, клиент перенаправляется, как ожидалось.

Предположительно это происходит из-за наблюдаемой «асинхронной» характеристики c.

My первый вопрос: допустим ли это использование наблюдаемого? Что могло быть альтернативой? (Поразмыслив, возможно, проблема заключается в том, как перенаправляется клиент)

Во-вторых, , экземпляр службы B (и внутри него экземпляр сокета) находится в область действия Компонента A. Если бы дополнительным компонентам требовался тот же сокет, создание экземпляра другой службы сокета в этом компоненте было бы бесполезным. Есть ли способ обойти это? Возможно, измените способ обращения к экземпляру службы сокета.

Компонент A 

export class AComponent {

  private foo: Foo;

  constructor(
    private b: BService,
  ) {}

  create(): void {

    this.b.create()
    .subscribe(foo => this.foo = foo);
    
    const url = `/foo/${this.foo.id}`;
    this.location.go(url);
  }
}

Услуга Б 

export class BService {
  constructor(
    private socketService: SocketService,
  ) {}
  
  create(): Observable<Foo> {
    this.socketService.send('trigger', 'data');
    return this.socketService.recv('trigger');
  }
}

SocketService

(кредиты Рахулу Дапке в: Как использовать сервис socket.io в angular? ) 

export class SocketService {
  private socket;

  constructor() { 
    this.socket = io('http://localhost:3000')
  }

  observer
  recv(trigger: string): Observable<any> {
    this.socket.on(trigger, (res) => {
      this.observer.next(res);
    });
    return this.getSocketDataObservable();
  }

  getSocketDataObservable(): Observable<any> {
    return new Observable(observer => {
      this.observer = observer;
    });
  }

  send(trigger: string, data: any): void {
    this.socket.emit(trigger, data);
  }
}
...