Question

我有两个组件，一个记录用户，另一个是导航栏，根据登录用户的不同而变化。

如果我登录或退出用户，然后手动刷新页面，我会从导航栏组件中获得正确的html，但是如果我只需登录然后通过角度重定向，我看不到变化。

如何通过手动刷新页面时实现的角度重定向实现相同的效果？

导航栏组件

userLoggedIn: boolean = false;
ngOnInit() {
        if (localStorage.getItem("user")) {
            this.userLoggedIn = true;
            this.user = localStorage.getItem("user").replace(/\"/g, "");
        } 

    }

登录组件

localStorage.setItem("user", JSON.stringify(res));
this.router.navigateByUrl('');

Answer 1

其中一种方法是创建可以保存用户状态的LoginService等共享服务。服务应注入两个组件。此服务应公开类型为loggedIn的{{1}}字段。在登录活动中，您应该Subject来自emit。导航栏组件应Subject到subscribe，并根据收到的值进行操作。

Angular严重依赖功能反应式编程范式。通过使用Subjects和Observables实现的组件的分离组合是理解Angular哲学的关键。如果您还有其他问题，请告诉我们。

Answer 2

您可以在导航组件中使用gettter，而不是在ngOnInit

中使用

user:any;
get userLoggedIn()
{
    if (localStorage.getItem("user")) {
         this.user = localStorage.getItem("user").replace(/\"/g, "");
         return true;
    } 
    return false;
 }
 ngOnInit() {
     //empty
 }

“神奇”是如果你的navigationComponent.html使用“userLoggedIn”，例如你的应用程序发生了变化，就会执行“get”。在一个＆lt; p * ngIf =“userLoggedIn”＆gt;用户记录＆lt; / p为H.

重新初始化组件或等效组件

2 个答案: