Angular 8 行为主题答案

【问题标题】：Angular 8 Behavior SubjectAngular 8 行为主题
【发布时间】：2020-04-21 15:23:06
【问题描述】：

我正在为我的网站构建身份验证部分。我正在使用 rxjs 中的行为主题来存储当前用户。我订阅了这个行为主题并使用这个 observable 来获取用户名值以显示在我的导航栏中。一切都差不多了，当我切换用户时，它会在导航栏中正确更新。但是，当我从我的组件调用注销函数（然后发出 null 以表示没有用户）时，它不会以某种方式从导航栏中删除名称。我已确保在 root 中只提供了一个服务实例。我知道我的注销功能已被使用，因为我留下了面包屑。这是我的注销功能。

logOut() {
this.user.next(null);
this.authToken = null;

console.log("logout executed");

localStorage.clear();
localStorage.removeItem("userData");

}

这是我的服务组件

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map, tap } from "rxjs/operators";
import { BehaviorSubject } from "rxjs";
import { User } from "../components/login/user.model";
import { Userr } from "../components/login/model.userr";

export interface RegisterResponse {
  success: boolean;
  msg: string;
  token?: string;
  user?: Userr;
}
@Injectable({
  providedIn: "root",
})
export class AuthserviceService {
  user = new BehaviorSubject<User>(null);
  //...more code...

这是我的导航栏组件的注销代码。

import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";

import { AuthserviceService } from "src/app/services/authservice.service";
import { Router } from "@angular/router";
import { FlashMessagesService } from "angular2-flash-messages";
import {  Subscription } from "rxjs";

@Component({
  selector: "app-navbar",
  templateUrl: "./navbar.component.html",
  styleUrls: ["./navbar.component.css"],
  host: {
    "(document:click)": "onClick($event)",
  },
})
export class NavbarComponent implements OnInit, OnDestroy {
  userSub: Subscription;
  isOpen = false;
  isAuthenticated = false;
  navOpen = false;
  user: string;

  constructor(
    private _eref: ElementRef,
    private authService: AuthserviceService,
    private router: Router,
    private flashMessage: FlashMessagesService
  ) {}

  ngOnInit() {
    this.userSub = this.authService.user.subscribe((user) => {
      if (!user) {
        return;
      }
      console.log(user);
      this.isAuthenticated = !!user;
      this.user = user.username;
    });
  }

  onClick(event) {
    if (!this._eref.nativeElement.contains(event.target))
      // or some similar check
      this.isOpen = false;
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }
  toggleBurg() {
    this.navOpen = !this.navOpen;
  }

  onLogOut() {
    this.authService.logOut()
    this.flashMessage.show("You are Logged Out!", {
      cssClass: "alert-success",
     timeout: 3000,
    });

    this.router.navigate(["login"]);
  }

  ngOnDestroy() {
    this.userSub.unsubscribe();
  }
}

【问题讨论】：

标签： angular rxjs behaviorsubject

【解决方案1】：

在您的userSub 订阅中，您有代码：

if (!user) {
    return;
}

这导致代码永远不会到达下面的代码，这看起来很相关。

如果这不能解决您的问题，则可能是 changeDetection 问题。

【讨论】：

【解决方案2】：

当您说不工作时，我认为您的意思是应该从导航栏中删除名称。我认为问题是

 if (!user) {
    return;
 }

您应该将其修改为

if (!user) {
   this.user = ''; 
   return;
 }

希望对你有帮助

【讨论】：

感谢您的成功！！我仍然很困惑为什么这段旧代码可以在我的其他应用程序上运行，但这次我必须采用这种新方法。
是的，我的意思是它应该从导航栏中删除名称。我编辑了我的问题以反映这一点。
如果可行，请接受并投票赞成答案。