首页 文章

从角度订阅中返回的正确方法是什么？

提问于
浏览 次
0

Disclaimer: 这是一个"good programming practices"问题，而不是"fix my broken code"问题 .

Environment

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

Issue

我正在使用角度材质库的mat-dialog组件，并订阅从afterClosed（）返回的observable . 在该订阅内部，我有一个简单的if语句 . 如果返回value，则返回value，否则返回null . 我的tslint非常适合从异步订阅中返回 . 确切的错误是，"TS2355: A function whose declared type is neither 'void' nor 'any' must return a value."

Code

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

}

Question

我想为我的函数指定一个返回类型'string'，但这意味着我需要在同步函数openModal（）中进行实际返回，而不是订阅中的异步代码 . 我对如何改进此代码的所有建议持开放态度 . 谢谢！

angular typescript rxjs observable

1 回答

  • 1

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

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

    这是JavaScript的核心概念，最突出的应用是 Observables ， Promises 和 Callback Functions . 了解异步代码执行和JavaScript事件循环如何工作以使用此编程语言至关重要 .

    至于你的代码示例，你需要将函数的返回类型更改为 Observable<string> 并将observable传递给组件类，在组件类中可以将它分配给属性，让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);
}
    回复于

相关问题