Угловой 2 проблемы с моей подпиской

Question

My 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.

Когда я загружаю свою страницу, я могу подтвердить, что нет пользователя. Я не получаю alert("True");. Однако ниже этого я включил тестовый код if (this.mainService.userLogged){alert("Fish");}.

Несмотря на отсутствие пользователя, меня все еще предупреждают о Рыбах.

Answer 1

The alert вызывается как в if блоке, вы проверяете, существует ли метод userLogged на службе mainService

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

Как mainService впрыскивается в компонент (то есть, инстанцируется и передается в конструктор вашего компонента угловым инжектором), он будет иметь все методы, которые вы определяете в нем. typescript классы в конечном итоге javascript конструктор функции которые при создании экземпляра дают объекты javascript. Эти объекты могут иметь функции как свойства, которые, как вам известно, являются объектами первого класса в JS.

Так выше в блоке, если при проверке на this.mainService.userLogged вы получаете truthy значения а, а userLogged определяются в mainService. Следовательно, он входит в блок if и стреляет alert.

EDIT:

Основываясь на комментариях, что я понимаю, что вы хотите, чтобы иметь возможность написать дополнительную логику, когда информация о пользователе достигает вас через поток 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 
}) 



} 

Надеется, что это помогает