从角度订阅中返回的正确方法是什么? [英] What is the proper way to return from within an angular subscription?

问题描述

免责声明:这是一个良好的编程实践"问题，而不是修复我损坏的代码"问题.

Disclaimer: This is a "good programming practices" question rather than a "fix my broken code" question.

环境

Angular 5.2.9、Angular Material 5.2.4、Typescript 2.4.2、Rxjs 5.5.8

Angular 5.2.9, Angular Material 5.2.4, Typescript 2.4.2, Rxjs 5.5.8

问题

我正在使用 angular material 库的 mat-dialog 组件，并订阅从 afterClosed() 返回的 observable.在该订阅中，我有一个简单的 if 语句.如果返回值，则返回值，否则返回空值.我的 tslint 对从异步订阅内部返回感到不满.确切的错误是，TS2355:声明类型既不是‘void’也不是‘any’的函数必须返回一个值."

I am using the mat-dialog component of the angular material library, and subscribing to the observable returned from afterClosed(). Inside of that subscription I have a simple if statement. If value is returned, return value, otherwise return null. My tslint is throwing a fit about returning from inside the async subscription. The exact error is, "TS2355: A function whose declared type is neither 'void' nor 'any' must return a value."

代码

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() 内进行实际返回，而不是订阅内的异步代码.我愿意接受有关如何改进此代码的所有建议.谢谢！

I want to specify a return type 'string' to my function, but that means I need to do the actual return from within the synchronous function openModal(), and not the async code inside the subscription. I am open to all suggestions on how to improve this code. Thanks!

推荐答案

实际上，您的代码有点破损，这不仅仅是关于良好的编程实践.

Actually, your code is kind of broken and this is not only about good programming practices.

您使用的是 Observable，这使您的代码异步.一旦你的代码是异步的，它就永远不会再同步了，你必须使用异步类型，直到你的函数的最后一个使用者.在 Angular 应用程序中，这通常是一个组件或指令.

You are using an Observable, that makes your code asynchronous. Once your code is asynchronous, it will never become synchronous again and you have to use asynchronous types until the very last consumer of your function. In an Angular application this is usually a Component or Directive.

这是 JavaScript 的核心概念，最突出地应用在 Observables、Promises 和 回调函数.要使用这种编程语言，了解异步代码执行和 JavaScript 事件循环的工作原理至关重要.

This is a core concept of JavaScript and is most prominently applied with Observables, Promises and Callback Functions. It is vital to understand how asynchronous code execution and the JavaScript event loop works in order to work with this programming language.

至于您的代码示例，您需要将函数的返回类型更改为 Observable 并将 observable 传递给您的组件类，您可以在其中将其分配给一个属性并让Angular 处理其余部分.

As for your code example, you need to change the return type of your function to Observable<string> and pass the observable on to your component class where you can assign it to a property and let Angular handle the rest.

看起来像这样:

private openModal() : Observable<string> {

    // some setup code

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

然后在您的组件中...

Then in your component...

private data: string;

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

这篇关于从角度订阅中返回的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！