Question

我正在使用eventEmitter在用户登录时显示NavComponent。如果我刷新屏幕，NavComponent html就会消失;可能是因为我用来显示/隐藏标题的值在刷新后不再存在。

在页面刷新时保留[hidden]="!loggedIn"之类的内容以保持true的好方法是什么？

以下是一些代码：

LogInService包含：@Output() userLoggedIn: EventEmitter<boolean> = new EventEmitter();

我的LoginComponent执行此操作： this.managerService.userLoggedIn.emit(true);

然后我的NavComponent有了这个：

@Input()
    loggedIn: boolean;

    constructor(private service: LogInService ) {
        service.userLoggedIn.subscribe(loggedIn => this.loggedIn = loggedIn);
    }

因此，LoginComponent发送到LogInService，然后NavComponent监听LogInService，以确定[hidden]是真还是假。

Answer 1

我认为使用localstorage实现此目的的最佳方法。您只需在登录服务中确定已登录的用户，例如：

private logInUser(user: User) {
    localStorage.setItem("userDetails", JSON.stringify(user));
    //nextValue here for the observers
}

在您的ngOnInit方法中，您可以检查localstorage并在用户已登录时触发nextValue。

就是这样！

Answer 2

LogInService类中的

：

export class LogInService {
   isAuthenticated = false;

   identify(): Promise<boolean> {
      // retrieve your authentication HTTP API
      this.isAuthenticated = true;  
   }

   isAuthenticated() {
     return this.isAuthenticated;
   }
}

将您的LogInService置于根级别NgModule将其设为 singleton ，您可以在项目的任何位置访问它。

在您的组件中：

isAuthenticated() {
    return this.logInService.isAuthenticated;
}

在模板中：

[hidden]="!isAuthenticated()"

Angular 4 - 保持导航栏在刷新

2 个答案: