2017-05-30 129 views
1

我正在构建一个简单的角度应用程序,我希望服务能够保持某种状态。我第一次尝试这只是一个布尔登录。基本上,我想要一个navbar组件来订阅这个值,这样当它的false显示一个'login'选项并且它的true显示一个'admin'按钮时。只能调用一次的可观察订阅方法

我的服务:

@Injectable() 
export class AuthService { 
    private _loggedIn = new BehaviorSubject(false); 
    public readonly loggedIn$ = this._loggedIn.asObservable(); 

    constructor(private http: Http, private router: Router) { 
    this._loggedIn = new BehaviorSubject(false); 
    } 

    public login(u: User): Observable<any> { 
    let obs = this.http.post(ApiRoutes.login, u).map(res => res.json()); 

    obs.subscribe(res => { 
     this._loggedIn.next(res.success); 

     if (this._loggedIn.getValue()) 
     this.router.navigate(['/admin']); 
    }); 

    return obs; 
    } 
} 

在我的导航组件:

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'], 
    providers: [AuthService] 
}) 
export class NavComponent implements OnInit { 
    loggedIn: boolean; 

    constructor(private as: AuthService) { } 

    ngOnInit() { 
    this.as.loggedIn$.subscribe(isLoggedIn => { 
     this.loggedIn = isLoggedIn; 
     console.log('from nav ' + isLoggedIn); 
    }, err => { 
     console.log(err); 
    },() => { 
     console.log('complete'); 
    }); 
    } 

} 

现在我看到控制台输出,当应用程序启动而不是登录后的回报。为什么nav组件中的订阅功能只被调用一次(页面导航到/ admin,所以我知道服务中的订阅正在被调用)?这是否与热/冷观测值有关?我尝试过使用诸如.publishLast()。refCount()之类的东西,但无济于事。

回答

4

您在NavComponent的提供者中添加了AuthService。因此,它具有自己的特定AuthService实例,与您的身份验证组件使用的实例不同。

该服务必须是单身人士,由应用程序中的所有组件共享。所以它应该在根NgModule的提供者中声明,而不是其他地方。

+0

是的。这似乎是全部。我想我已经添加了这样的提供者,因为它似乎摆脱了关于无法解析服务的构造函数参数的ts错误。方便地,我没有再看到这个错误了。哦,学到了新的东西。谢谢! – eatinasandwich