Angular 我的订阅有 2 个问题

Question

我的app.component

import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Subscription } from 'rxjs/Subscription';
import { MainService } from './main.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    private logsub: Subscription;
    private checking: string;
    constructor(private af: AngularFire, private mainService: MainService){}

    ngOnInit(){
        this.logsub = this.mainService.userThere$.subscribe(isUser => {
            if (isUser){
                firebase.auth().onAuthStateChanged(function(user){
                    if (user){
                        this.mainService.userLogged(true);
                        alert("True");
                    }
                    else {
                        this.mainService.userLogged(false);
                    }
                });
            }
        });

        if (this.mainService.userLogged){alert("Fish");}
    }

    ngOnDestroy(){
        this.logsub.unsubscribe();
    }
}

我的main.services

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MainService {
    private userThere = new Subject<boolean>();
    userThere$ = this.userThere.asObservable();

    userLogged(isUser: boolean){
        this.userThere.next(isUser);
    }
}

我在这里不明白的是这个。我有一个用户授权码。如果有用户，我会返回一个alert("True")。而且我还将我的 userLogged 订阅设置为 true。

当我加载我的页面时，我可以确认没有用户。我没有得到 alert("True");。但是，在此下方我包含了一个测试代码 if (this.mainService.userLogged){alert("Fish");}.

尽管没有用户，我仍然收到鱼的提醒。

Answer 1

在 if 块中调用 alert，您正在检查服务 mainService

上是否存在方法 userLogged

if (this.mainService.userLogged){alert("Fish");}

由于 mainService 被注入到您的组件中（即，由 angular 注入器实例化并传递到组件的构造函数中），它将具有您在其中定义的所有方法. typescript classes 最终是 javascript 构造函数 实例化时给你 javascript 对象。这些对象可以具有作为属性的功能，您可能知道这是 JS 中的第一个 class 对象。

所以在上面的 if 块中，当您检查 this.mainService.userLogged 时，您会得到一个 truthy 值，因为 userLogged 在 [=14= 中定义].因此它进入 if 块并且 alert 被解雇。

编辑：

根据我收集到的评论，您希望能够在用户信息通过 mainService.userThere$ 观察者流到达您时编写额外的逻辑。我们可以为单个观察者流设置多个回调。也就是说，您在观察者流中注册的所有回调都将在观察者源被触发时被调用。所以你可以这样做：

ngOnInit(){
    this.logsub = this.mainService.userThere$.subscribe(isUser => {
        if (isUser){
            firebase.auth().onAuthStateChanged(function(user){
                if (user){
                    //this.mainService.userLogged(true);
                    alert("True");
                    // no need to set userLogged true or false again 
                }
                else {
                    //this.mainService.userLogged(false);
                }
            });
        }
    });

//if (this.mainService.userLogged){alert("Fish");}
// instead of above do this
this.mainService.userThere$.subscribe( isUser => {
    alert("Fish");
    // We can attach as many functions as we want to the
    // observer stream. So all you have to do is simply pass
    // userThere$ observer stream in any component you want to
    // write the additional logic
})



 }

希望对您有所帮助

Angular 我的订阅有 2 个问题

Angular 2 issue with my subscription

subscribe

observable

angular