从angular4中的另一个组件中刷新组件

Question

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

我们正在使用 Angular 4。通常解决方案是在以前的版本中添加观察者，但现在已经不存在了，因此需要一些现实世界的知识来实现可能很简单的解决方案问题。

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

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

所以我们在登录和注销时刷新视图（组件）时遇到了问题。

在 "logon" 上使用单独的 router_outlet 并且在成功登录后我们导航到用户 table 并且这会导致 init 重新加载用户。然而，由于这只是更改 router_outlet，因此 header 不会刷新以显示现在的 "logout" 和 "reset password" 选项。因此，此解决方案需要在 headed_component 和 router_outlet 上触发刷新。

第二个问题是，在 "logoff" 上，这是在 header_component 中完成的，因此 header 中的选项更改为 "login" 和 "Forgot Password"。这次的问题是 router_outlet 不会刷新以删除登录为您提供给（编辑、删除、添加）用户的附加功能。

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

欢迎任何想法。

非常感谢

刘易斯

更新：好的，所以我在这方面取得了一些进展，但是我遇到了一些死胡同

我已经实现了可观察的概念

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

用户组件也有很多相同之处

登录服务有 ` 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

使用一项服务，该服务将 return 您的用户状态 i:e 无论用户是否登录。

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

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

userFlag = serviceName.isLoggedIn();

在您的 html 文件中使用此标志根据用户标志显示所需的标签 i:e 如果 userFlag 为真（用户已登录）则

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

您也可以尝试 Angular Observables

从angular4中的另一个组件中刷新组件

refreshing components from within another component in angular4

typescript

router-outlet

angular