订阅时的Angular2设置变量不起作用

Question

我对 angular2 很陌生，但我尝试编写一个登录组件。一切正常，除了成功登录后我想在我的会话服务中设置用户名和密码（我存储用户名和密码以创建基本的身份验证标头）。可悲的是this._session.loggedIn 永远不会被设置。有人知道为什么吗？

export class LoginComponent {

    public email = '';
    public password = '';

    constructor(
        private _router: Router,
        private _auth: AuthenticationService,
        private _session: SessionService) {
    }

    login() {
        this._auth.login(this.email, this.password)
            .subscribe(
                data => {
                    this._session.currentProfile = data;
                    this._session.loggedIn = true;
                    this._router.navigate(['Home']);
                },
                err => {}
            );
    }
}

身份验证服务：

login(email, password){
        return this._http.get('/profile')
            .map(res => res.json());
}

Answer 1

这段代码是传递给subscribe的函数

        data => {
            this._session.currentProfile = data;
            this._session.loggedIn = true;
            this._router.navigate(['Home']);
        }

此代码不会立即执行，但有时会在稍后执行，当来自服务器的响应到达或任何可观察对象发出新事件所需的事件时，会导致调用上述函数。

这意味着

login() {
    this._auth.login(this.email, this.password)
        .subscribe(
            data => {
                this._session.currentProfile = data;
                this._session.loggedIn = true;
                this._router.navigate(['Home']);
            },
            err => {}
        );
    // <<== at this point above code hasn't been executed yet and no values are set
}

如果您需要在数据到达时执行代码，则需要将其移动到回调中。

如果login 的调用者需要访问接收到的数据，它也必须等待数据到达。您可以通过返回 observable 来实现这一点

login() {
    return this._auth.login(this.email, this.password)
        .map(
            data => {
                this._session.currentProfile = data;
                this._session.loggedIn = true;
                this._router.navigate(['Home']);
            }
        );
}

在这种情况下，您不能使用 subscribe，因为它会返回 Subscription。如果您改用map，则会返回一个Observable，调用者可以使用它，例如

this.login().subscribe(data => this.doSomething());

这样当doSomething()被调用时，_session.currentProfile、_session.loggedIn被设置并且router.navigate()被调用。

始终需要正确链接异步执行，并且无法从异步调用返回到同步执行。