如何在angular2中使用Observable？

Question

我在我的應用程序中使用了衛兵。如果我進行刷新，頁面不會再次加載＃上的跳轉。

問題是警衛。刷新時它沒有loginUser。

在我來說，我不知道如何使用觀察到：

@Injectable() 
export class MyComponentGuard implements CanActivate { 
    constructor(private _userService: UserService) { } 
    //on refresh it returns false because the loginUser is null 
    canActivate() { 
     return this._userService.isUserinGroup(UserGroup.CALL_CENTER); 
    } 

我的服務：

@Injectable() 
export class UserService { 

private loggedInUser: User = null; 

constructor(private _httpService: HTTPService) { } 

//this is called in root component 
public loadUser() { 
     this._httpService.getAuthenticationUser() 
      .subscribe(this.setLoggedInUser.bind(this)); 
    } 

private setLoggedInUser(user: User) { 
    this.loggedInUser = user; 
} 

public getLoggedInUser(): User { 
    return this.loggedInUser; 
} 

public isUserLoggedIn(): boolean { 
    return this.loggedInUser != null; 
} 

public isUserinGroup(group: UserGroup): boolean { 
    //here is the problem the user is on refresh null 
    if (!this.loggedInUser) { 
     return false; 
    } 

    for (var userGroup of this.loggedInUser.authGroups) { 
     // if in group return true 
    } 
    return false; 
} 

}

我怎麼可以在這裏做一個異步調用？

Answer 1

更改後衛是異步：

@Injectable() 
export class MyComponentGuard implements CanActivate { 
    constructor(private _userService: UserService) { } 
    //on refresh it returns false because the loginUser is null 
    async canActivate(): Promise<boolean> { 
     return this._userService.isUserinGroup(UserGroup.CALL_CENTER); 
    } 

然後改變你的服務是異步還有：

public loggedInUserPromise: Promise<User> = null; 

constructor(private _httpService: HTTPService) { } 

//this is called in root component 
public loadUser() { 
    if (!this.loggedInUserPromise) { 
     this.loggedInUserPromise = this._httpService.getAuthenticationUser().toPromise(); 
    } 
} 

public async isUserinGroup(group: UserGroup): Promise<boolean> { 
    if (!this.loggedInUserPromise) { this.loadUser(); } 

    const user: User = await this.loggedInUserPromise; 
    if (!user) { 
     return false; 
    } 

    for (var userGroup of user.authGroups) { 
     // if in group return true 
    } 
    return false; 
} 

我刪除了setLoggedInUser和getLoggedInUser功能，因爲他們並不真正需要的和如果您需要額外的代碼，您應該直接在該屬性上使用get和set。