导航栏中的配置文件图标，可自动重新加载(角度)

Question

我创建了一个导航栏，当用户登录时，"登录"链接由该用户的个人资料图标修改。登录时出现问题，导航栏会重新加载，但配置文件图标不会出现，直到您使用 F5 手动重新加载整个页面。

<li *ngIf="_usuarioService.estaLogueado() == true" class="dropdown nav-item dropleft">
<a href="#" class=" nav-link" data-toggle="dropdown">
<div *ngIf="user" class="photo">
<img [src]="user.foto | imagen" alt="Profile Photo" width="35" height="35">
</div>

他们告诉我，作为一种解决方案，删除导航栏作为应用程序的通用组件，并将其放在所有页面上，以便重新加载它们。但我的问题是，是否有任何方法可以在登录时重新加载该特定图标。

组件代码：

export class NavbarComponent implements OnInit {
constructor( public _usuarioService: UsuarioService) { }
user:Usuario;
ngOnInit() {
this._usuarioService.cargarStorage();
this._usuarioService.getUser(localStorage.getItem('id'))
.subscribe((data:any) => {
this.user = data;
});
}
}

Answer 1

当您的视图被启动并且用户尚未登录时，这种情况_usuarioService.estaLogueado() == true被正确false，因此不会呈现<li>元素及其内容。

登录时，导航栏组件不会销毁并重新生成，因此不会再次评估条件_usuarioService.estaLogueado() == true。

当您刷新页面时，组件确实会被销毁然后启动，因此再次检查条件，这次(因为用户已登录(_usuarioService.estaLogueado()返回 true。这就是您看到此行为的原因。

有很多方法可以解决这种行为，但我建议的方法是使用可观察量，以便在用户登录状态下侦听更改。

这个小例子可能会给你一个想法。