Получить наблюдаемое возвращаемое значение без подписки в вызывающем классе - PullRequest
Новая
       1

Получить наблюдаемое возвращаемое значение без подписки в вызывающем классе

1 голос
/ 02 марта 2020

В TypeScript / Angular вы обычно вызываете функцию, которая возвращает наблюдаемое, и подписываетесь на нее в таком компоненте, как этот: 

this.productsService.getProduct().subscribe((product) => { this.product = product });

Это нормально, когда код выполняется в классе, который управляет данными, но, по моему мнению, это не должно быть обработано в компоненте. Возможно, я ошибаюсь, но я думаю, что работа компонента должна заключаться в том, чтобы запрашивать и отображать данные без обработки того, как они получены.

В шаблоне angular вы можете сделать это, чтобы подписаться и отобразить результат наблюдаемого: 

<h1>{{ product.title | async }}</h1>

Возможно ли иметь что-то подобное в классе компонентов? Мой компонент отображает форму и проверяет, является ли дата действительной после ввода. Отправка формы блокируется до тех пор, пока значение не станет действительным, и я хочу сохранить все логи c позади нее в службе, которая должна подписаться на вызов AJAX, компонент проверяет только, получил ли он действительную дату. 

 class FormComponent {
    datechangeCallback(date) {
        this.dateIsValid$ = this.dateService.checkDate(date);
    }

    submit() {
        if (this.dateIsValid$ === true) {
            // handle form submission...
        }
    }
}

1 Ответ

2 голосов
/ 02 марта 2020

Вы можете преобразовать rx js Observables в ES6 Promises, а затем использовать синтаксис async-await для получения данных без наблюдаемой подписки.

Служба: 

export class DateService {
  constructor(private http: HttpClient) {}

  async isDateValid(date): Promise<boolean> {
    let data = await this.http.post(url, date, httpOptions).toPromise();
    let isValid: boolean;
    // perform your validation and logic below and store the result in isValid variable
    return isValid;
  }
}

Компонент: 

class FormComponent {
    async datechangeCallback(date) {
        this.dateIsValid = await this.dateService.isDateValid(date);
    }

    submit() {
        if (this.dateIsValid) {
            // handle form submission...
        }
    }
}

PS:

Если это простой HTTP-запрос, который завершается при получении одного значения, то использование обещаний не повредит. Но если этот obersvable создает некоторый непрерывный поток значений, то использование Promises не является лучшим решением, и вам придется вернуться к rx js наблюдаемым.

...