Gözlemci sadece bir sonraki çağrıdan değer alır

Question

angular.io numaralı örnekten ilham aldı (Ebeveynler ve çocuklar bir hizmet aracılığıyla iletişim kurar) Ben kullanıcının kimliği doğrulanmış gezinme bileşenimi bildirmek için bir gözlemci/gözlenebilir model uygulardım. Sorun, navigasyon bileşeninin sadece kullanıcı oturumu kapattığı zaman bir bildirim almasıdır. Her iki aramalar (giriş ve çıkış) yapılır ve hata özel durum dikkat ettik

export class AuthenticationService { 

    private isAuthenticatedSource = new Subject<boolean>(); 

    isAuthenticated$ = this.isAuthenticatedSource.asObservable(); 

    constructor(private http : AuthHttp) {} 

    login(email: string, password: string) { 
    ... 
    this.isAuthenticatedSource.next(true); 
    ... 
    } 

    logout() { 
    ... 
    this.isAuthenticatedSource.next(false); 
    ... 
    } 

} 

: gibi

Benim kimlik doğrulama hizmeti görünüyor. giriş ve "olarak güncellendi: false" zaman dışarı oturum açarken:

export class NavigationComponent implements OnDestroy, OnInit { 

    private subscription: Subscription; 

    isAuthenticated: boolean; 

    constructor(private authService: AuthenticationService, 
       private router: Router) { 
    this.isAuthenticated = authService.isAuthenticated(); 
    } 

    logout(event) { 
    event.preventDefault(); 
    this.authService.logout(); 
    this.router.navigate(["Authentication", "Login"]); 
    } 

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

    ngOnInit() { 
    this.subscription = this.authService.isAuthenticated$.subscribe(
     value => console.log("updated to:", value) 
    ); 
    } 

} 

konsol log "true Güncelleme" olmalıdır: Benim navigasyon bileşeni gibi görünüyor. Sorun, sadece çıkış yaparken bir mesaj göstermesidir. Açıkça gözlemci giriş yaparken değeri (doğru) almaz. Umarım bunun neden olduğunu açıklamanıza yardımcı olabilirsiniz.

Güncelleme

giriş çağrı şimdi aşağıda bulunmaktadır. Bir kullanıcı (giriş) formu gönderdiğinde benim LoginComponent den denir.

export class LoginComponent { 

    public email : string; 
    public password : string; 
    public errors : any; 
    public next : any; 

    constructor(private authService : AuthenticationService, 
       private router : Router, 
       private params : RouteParams) { 
    // default to navigate to dashboard on successfull login 
    let next = this.params.get("next") || "/Dashboard"; 
    this.next = [next]; 
    } 

    login(event) { 
    event.preventDefault(); 
    this.authService.login(this.email, this.password) 
         .subscribe(
         data => this.router.navigate(this.next), 
         errors => this.errors = errors); 
    } 

} 

karşılık gelen şablon giriş tek bir çağrı vardır: gibi LoginComponent görünüyor <form (submit)="login($event)">. Giriş, uygulamada başka yerlerde aranmaz.

Answer 1

Ben excactly emin değilim. Nedenini anlamak için biraz daha araştırma yapmalıyım. Geri bildiriminiz için teşekkürler.

Answer 2

Giriş bilgilerini nerede aradığınızı anlamıyorum. Ancak, UI abone olmadan önce hizmette oturum açmanın, sizin gözleminizi yeniden ürettiğini, UI'nin güncelleştirilmediğini gösteren bir örnek üzerinde çalıştım. AppComponent yapıcısındaki authService.login() çağrısı, UI üzerinde hiçbir etkisi yoktur. Bunun nedeni, abonenin ngOnInit'te daha sonra gerçekleşmesidir. Umarım bu yararlıdır. Çalışır, ancak statik bir değişken olarak isAuthenticatedSource ayar sorunu giderip neden

http://plnkr.co/edit/fteTLPCJUucCVKdVzJuP

export class AppComponent implements OnDestroy, OnInit { 

    @Output subscribe: string; 
    private subscription: Subscription; 
    private authService: AuthenticationService; 

    constructor(private authService: AuthenticationService) { 
    this.subscribe = 'not set'; 
    this.authService = authService; 

    authService.login('john', 'password'); // has no affect on UI since login happens before subscribe in ngOnInit 
    } 

    login() { 
    this.authService.login('john', 'password'); 
    } 

    logout() { 
    this.authService.logout(); 
    } 

    ngOnInit() { 
    this.subscription = this.authService.isAuthenticated$.subscribe(
     //value => console.log("updated to:", value) 
     value => this.subscribe = '' + value; 
    ); 
    } 

}