Question

我对angular2很新，但我试着写一个登录组件。一切正常，除非成功登录后我想在我的会话服务中设置用户名和密码（我存储用户名和密码以创建基本的auth标头）。可悲的是，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 => {}
            );
    }
}

的AuthenticationService：

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']);
        }

此代码不会立即执行，但有时会在服务器响应到达时或者observable发出新事件所需的任何事件后执行，然后调用上述函数。

这意味着

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的调用者需要访问接收的数据，则必须等待数据到达。您可以通过返回可观察的

来实现此目的

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()已被调用。

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

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

1 个答案: