Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/java/309.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何链接/组合观测值_Javascript_Angular_Rxjs_Observable_Rxjs5 - Fatal编程技术网

Javascript 如何链接/组合观测值

Javascript 如何链接/组合观测值,javascript,angular,rxjs,observable,rxjs5,Javascript,Angular,Rxjs,Observable,Rxjs5,好吧,这已经困扰了我一段时间了,想知道是否有人可以向我展示一种在多个服务之间链接观测值的好方法 在下面的Auth类示例中,从this.api.postSignIn()创建可观察对象的好方法是什么,这样signInSubmit()就可以在组件中订阅它了?值得注意的是,this.api.postSignIn()正在订阅Angular2 http请求 这有点反模式吗?有没有更好的方法 基本上,我希望实现的功能是: 组件-负责收集登录数据并以正确的格式将其发送到身份验证服务。完成身份验证登录后,导航到

好吧,这已经困扰了我一段时间了,想知道是否有人可以向我展示一种在多个服务之间链接观测值的好方法

在下面的Auth类示例中,从
this.api.postSignIn()
创建可观察对象的好方法是什么,这样
signInSubmit()
就可以在组件中订阅它了?值得注意的是,
this.api.postSignIn()
正在订阅Angular2 http请求

这有点反模式吗?有没有更好的方法

基本上,我希望实现的功能是:

  • 组件-负责收集登录数据并以正确的格式将其发送到身份验证服务。完成身份验证登录后,导航到管理页面
  • 服务-进行api调用以获取令牌,通过令牌服务设置令牌并设置
    isSignedIn
    bool,然后将控制权延迟回调用组件

    @Component({...})
    export class SignIn {
       private signIn:SignInModel = new SignInModel();
    
        constructor(private auth:Auth, private router:Router) {
        }
    
        ngOnInit() {
        }
    
        signInSubmit() {
            this.auth.signIn(this.signIn)
                .subscribe(
                    () => {
                        this.router.navigate(['/admin']);
                    }
               )
        }
    
    }
    
    @Injectable()
    export class Auth {
        private isSignedIn:boolean = false;
    
        constructor(private api:Api, private tokenService:TokenService) {
    
        }
    
        public signIn(signIn:SignInModel) {
    
           return this.api.postSignIn(signIn)
                .subscribe(
                    response => {
                        this.tokenService.set(new TokenModel(response.token));
                        this.isSignedIn = true;
                    },
                    error => {
                        console.log(error);
                    }
                );
        }
    
        public signOut() {
    
       }
    }
    

我会利用
do
catch
操作符,而不是在
signIn
方法中订阅

以下是重构的
signIn
方法:

public signIn(signIn:SignInModel) {
   return this.api.postSignIn(signIn)
        .do(
            response => {
                this.tokenService.set(new TokenModel(response.token));
                this.isSignedIn = true;
            })
        .catch(
            error => {
                console.log(error);
            }
        );
}

在您的情况下,您不能订阅此方法返回的对象,因为
subscribe
方法返回的是订阅,而不是可观察的。所以您不能订阅它…

谢谢您将阅读.do()和.catch()的相关内容,并了解它与subscribe()的区别。不客气!使用运算符的区别在于,它们允许您将处理插入到异步数据流中。通过订阅,您可以“简单地”在可观察的对象上接收事件(错误和完成)。本精彩教程将有助于理解以下内容:。