Angular2 DataStore-使用rxjs Subject时authGuards不再起作用

Question

I am building a User Profile Data Store so my Angular 2 app doesn't need to go to the server so frequently. The app currently functions fine when I consume the service directly but when I add my data store layer in between it behaves as though my observable only emits one time (when my navigation bar component reads their currentuser.name). Components that consume the service seem to work, and my AuthGuards no longer work (which use the UserProfileStore to get the users info). I suspect I am using Subject incorrectly and/or need to use some variant of BehaviourSubject or ReplaySubject , but I really don't know where to start. My code is semi-based off of this example: Cory Ryan Angular 2 Observable Data Services

Any ideas on what I'm missing?

user-profile.store.ts

@Injectable()
export class UserProfileStore implements OnDestroy {
private _currentUser:SjfrUser;
private _currentUser$: Subject<MyAppUser>;
private _subscription: Subscription;

constructor(private authService: AuthService) {
    this._currentUser$ = <Subject<MyAppUser>> new Subject();
}

getCurrentUser = () : Observable<MyAppUser> => {

    if (!this._currentUser) {
        let currentUser$ = this.authService.getCurrentUser(); // Performs http
        this._subscription = currentUser$.subscribe((currentUser: MyAppUser) => {                
            this._currentUser = currentUser;
            this._currentUser$.next(this._currentUser);
        });
    }

    return this._currentUser$.asObservable();
}

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

}

Auth-Guard.service.ts

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
    constructor(private userProfileStore: UserProfileStore, private authService: AuthService, private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {        

        let url: string = state.url;

        //var currentUser$ = this.authService.getCurrentUser(); // Works with this
        var currentUser$ = this.userProfileStore.getCurrentUser(); // No longer works            

        return currentUser$.map(x => {
            console.log("AuthGuard" + x.userName);  // This code no longer gets executed when using the datastore
            if (x.isExternalUser && url === '/external') {
                return true;
            } else if (x.isInternalUser && url === '/internal') {
                return true;
            } else {
                this.router.navigate(['/pagenotfound']);
                return false;
            }
        });     


    }
...

Answer 1

Try doing it with .first() after map

 @Injectable() export class AuthGuard implements CanActivate, CanActivateChild, CanLoad { constructor(private userProfileStore: UserProfileStore, private authService: AuthService, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { let url: string = state.url; //var currentUser$ = this.authService.getCurrentUser(); // Works with this var currentUser$ = this.userProfileStore.getCurrentUser(); // No longer works return currentUser$.map(x => { console.log("AuthGuard" + x.userName); // This code no longer gets executed when using the datastore if (x.isExternalUser && url === '/external') { return true; } else if (x.isInternalUser && url === '/internal') { return true; } else { this.router.navigate(['/pagenotfound']); return false; } }).first(); }