Question

我会尽量保持简洁和简洁。

我们正在使用Angular 4.通常情况下，解决方案是在以前的版本中添加观察者，但这些不再存在，因此需要一些关于实现可能是简单问题的解决方案的真实世界知识。

我们的main.ts文件中有3个组件

<header_component></header_component>
<router_outlet></router_outlet>
<footer_component></footer_component>

因此，在登录和注销时刷新视图（组件）时遇到问题。

On＆＃34;登录＆＃34;使用单独的router_outlet，并且在成功登录时，我们导航到用户表，这会导致init重新加载用户。但是因为这只是更改router_outlet，所以标题不会刷新以显示now＆＃34; logout＆＃34;和＆＃34;重设密码＆＃34;选项。因此，解决方案需要触发heads_component和router_outlet的刷新。

第二个问题是＆＃34;注销＆＃34;这是在header_component中完成的，因此标题中的选项变为＆＃34; login＆＃34;和＃34;忘记密码＆＃34;。这次的问题是router_outlet没有刷新以删除登录所带来的其他功能（编辑，删除，添加）用户。

我看过Angular.io，文档并没有真正涵盖我们正在使用的设置。当然，这可能只是我对它的解释。

任何想法都表示赞赏。

非常感谢提前

路易斯

更新：好的，所以我在这方面取得了一些进展，但是我已经有点死路了

我实施了可观察的概念

headerComponent有 constructor(private _loginService: LoginService, private _authService: AuthService) { this.isLoggedIn = _loginService.getLoggedInStatus.subscribe((loggedIn: boolean) => this.changeLoggedInStatus(loggedIn)); }

用户组件也有很多相同的

loginService有 `export class LoginService { @Output（）getLoggedInStatus：EventEmitter = new EventEmitter（）;

isLoggedIn(): Observable<boolean> {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser) {
        this.getLoggedInStatus.emit(true);
        return (true) as any;
    } else {
        this.getLoggedInStatus.emit(false);
        return (false) as any;
    }
}

注销时，我点火this.getLoggedInStatus.emit(false)，但用户组件

未收到此消息

任何想法？

Answer 1

使用能够返回用户状态的服务i：e用户是否登录。

isLoggedIn(){
  return true //if user is logged in
   or
  return false // if the user is not logged in 
}

然后在您的标题组件中，您可以调用此服务来检查用户状态并根据响应设置标记

userFlag = serviceName.isLoggedIn();

在您的html文件中

使用此标志显示基于用户标志的所需标签 i：e如果userFlag为true（用户已登录），则

<div *ngIf="userFlag">  
    display "logout" and "reset password" 
</div>
<div *ngIf="!userFlag">
     display "login" and "forgot password" 
</div>

你也可以试试Angular Obsevables

从angular4

1 个答案: