Как правильно вернуться из угловой подписки? - PullRequest
Новая
       6

Как правильно вернуться из угловой подписки?

0 голосов
/ 25 сентября 2018

Отказ от ответственности: Это вопрос о "хороших методах программирования", а не вопрос "исправить мой сломанный код".

Окружающая среда

Угловой 5.2.9, Угловой материал 5.2.4, Машинопись 2.4.2, Rxjs 5.5.8

Выпуск

Я использую компонент диалогового окна библиотеки угловых материалов и подписываюсь на наблюдаемое, возвращаемое из afterClosed ().Внутри этой подписки у меня есть простое утверждение if.Если значение возвращается, вернуть значение, в противном случае вернуть ноль.Мой tslint устраивает возвращение из-за асинхронной подписки.Точная ошибка: "TS2355: функция, объявленный тип которой не является ни void, ни any, должна возвращать значение."

Код 

private openModal() : string {

    // some setup code

    this.dialog.open(MyModalComponent, configModal)
        .afterClosed()
        .subscribe(( data : string ) => {
            if ( data ) {
                return data;
            } else {
                return null;
            }
        });

    // cant put return here,  this will execute before modal returns data

}

Вопрос

Я хочу указать тип возврата «строка» для моей функции, но это означает, что мне нужно сделать фактический возврат из синхронной функции openModal (), а не асинхронный код внутри подписки.Я открыт для всех предложений о том, как улучшить этот код.Спасибо!

1 Ответ

0 голосов
/ 25 сентября 2018

На самом деле, ваш код неисправен, и речь идет не только о хороших методах программирования.

Вы используете Observable, который делает ваш код асинхронным .Если ваш код асинхронный, он никогда не станет синхронным, и вам придется использовать асинхронные типы до самого последнего потребителя вашей функции.В приложении Angular это обычно Компонент или Директива.

Это основная концепция JavaScript, и она наиболее широко применяется в Observables , Promises и Функции обратного вызова .Очень важно понять, как работает асинхронное выполнение кода и цикл событий JavaScript, чтобы работать с этим языком программирования.

Что касается вашего примера кода, вам нужно изменить тип возвращаемого значения вашей функции на Observable<string>и передайте наблюдаемое в свой класс компонентов, где вы можете назначить его свойству и позволить Angular обрабатывать все остальное.

Это выглядит так: 

private openModal() : Observable<string> {

    // some setup code

    return this.dialog.open(MyModalComponent, configModal)
        .afterClosed();
}

Затем в вашем компоненте ... 

private data: string;

clickSomeButton()  {
    this.openModal().subscribe(data => this.data = data);
}
...