Angular BehaviorSubject; “下一个”方法不起作用

时间:2019-05-01 00:15:54

标签: angular typescript angular6 observable reactive-extensions-js

我有一个在Angular 4中写的代码,它可以正常工作,现在它的一部分在Angular 6中已损坏,我希望能得到一些帮助。

我有一个AuthService班:

export class AuthService {

    private loggedIn = new BehaviorSubject<boolean>(false);

    isUserLoggedIn(): Observable<boolean> {
        return this.loggedIn.asObservable();
    }

    isUserLoggedIn(): Observable<boolean> {
        return this.loggedIn.asObservable();
    }

    login(username: string, password: string) {
        let body =
        {
            username: username,
            password: password
        };

        return this._http.post(Settings.apiEndpoint + "users/authenticate", body)
            .map(res => {
                localStorage.setItem('token', res["token"]);
                localStorage.setItem('username', res["username"]);
                this.isLoggedIn = true;
                this.loggedIn.next(true);
                return res;
            })
            .catch(error => {
                this.clearAuthData();
                return Observable.throw(error)
            });
    }

    logout() {
        localStorage.clear();
        this.isLoggedIn = false;
        this.loggedIn.next(this.isLoggedIn);
    }
}

在我的AppComponent中,我在ngOnInit中订阅了这个主题:

this._auth.isUserLoggedIn()
            .subscribe(
                d => {
                    console.log("d here", d);
                    if (d)
                    {
                        this.isLoggedIn = true;
                        this.username = this._auth.getUsername();
                    }
                    else {
                        this.isLoggedIn = false;
                    }
                },
                d => {
                    console.log("error.");
                },
                () => {
                  console.log("bull.");
                }
            );

问题是当我注销时,AppComponent确实对可观察到的对象做出了反应,但是当我登录时却没有。据我从Angular 4的内容看,该代码是未经修改的,因此我无法弄清为什么它不触发。

1 个答案:

答案 0 :(得分:1)

您的代码无法正常运行,因为rxjs 6发生了重大变化,引入了5.5版可管道运算符

之前:

var thread = _appDbContext.Threads
                          .Include(t => t.Posts)
                          .ThenInclude(p => p.ApplicationUser)
                          .Include(t => t.ApplicationUser)
                          .Where(t => t.Id == id)
                          .Select(t => new
                                       {
                                            title = t.Title,
                                            body = t.Body,
                                            threadUserName = t.ApplicationUser.UserName,
                                            postsThread = t.Posts.Select(p => new {
                                                                                      p.Content,
                                                                                      p.ApplicationUser.UserName
                                                                                  })
                                       })
                          .ToList();

现在:

source.map(x => x * 2).catch(() => of('ups'))

他们还将catch()移到catchError(),将do()移到tap(),将switch()移到switchAll(),最后将(finally)移到finalize()

[编辑] 不要忘了像这样导入您的rxjs运算符: 从'rxjs / operators'导入{map};