登录后更新Angular 4页面的最简单方法

我有一个简单的Angular 4项目，如下所示：

app.component.html

<alert></alert> <-- Alert service
<cat-header></cat-header> <-- Site header with Sign in button
<router-outlet></router-outlet> <-- Main content
<cat-footer></cat-footer> <-- Site footer

成功登录后，登录组件将使用导航到主页面

this.router.navigate([this.returnUrl]);

问题是导航完成后并没有头组件更新（既并没有调用构造函数也并没有调用Ngonit代码）。在初始导航后，当我在浏览器中按Ctrl+F5时，标题组件会像应该的那样更新

我试图通过互联网搜索这个案例，并找到了一些复杂的解决方案，比如使用发射器或虚拟路径重新加载页面。但是解决这样一个简单的任务看起来非常复杂

以下是我的标题组件：

export class HeaderComponent implements OnInit {

currentUser: User;
constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.activatedRoute.params.subscribe(data => {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    });
}

ngOnInit() {
}
}

currentUser: User;
constructor(private currentUserService: CurrentUserService) {
     currentUserService.itemValue.subscribe(currentUser => {
     this.currentUser = JSON.parse(currentUser);
    });
}

下面是带有登录按钮的标题组件模板中的代码：

<a *ngIf="currentUser; else notLogedIn" href="javascript: void(0);" [routerLink]="['/login']">Log off</a>

<ng-template #notLogedIn><a href="javascript: void(0);" [routerLink]="['/login']">Log in</a>

所以现在它只是显示不同的链接文本

这种逻辑的可视化：

---

让服务知道用户是否登录

<cat-header *ngIf="userService.isLoggedIn()"></cat-header>


isLoggedIn(){
   return true/ false ;
}

伊斯洛格丁（）{
返回真/假；
}

从我的角度来看，我尝试了不同的方法，并提出了最简单的解决方案

我已创建一个服务来检查当前用户状态：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';   

@Injectable()
export class CurrentUserService {
itemValue = new Subject<string>();

set currentUser(user) {
  this.itemValue.next(user);
  localStorage.setItem('currentUser', user);
}

get currentUser() {
  return localStorage.getItem('currentUser');
}
}

---

它就像一个符咒

另一种方式 我知道这是一个老问题，如果您不想解析，另一种方法可以是：

In.ts

---

我有这样的检查，但在我的头组件模板。我已经在我的第一篇文章中添加了这部分HTML代码。所以，请告诉我，我会帮你解决的问题是，这个.router.navigate（[this.returnUrl]）；导航到主页面后不要更新标题组件。我认为这是因为模板在外部，但不知道如何正确触发标题组件重新加载/更新。因此，主布局和模式对话框位于同一父级下。所以你不能控制它。在这种情况下，将其向下推一级或使用共享服务将有助于您我的登录组件是另一个带有/Login路径的页面。成功登录后，它会导航回主页/路径。这是一个很好的解决方案。

currentUser: User;
constructor(private currentUserService: CurrentUserService) {
     currentUserService.itemValue.subscribe(currentUser => {
     this.currentUser = JSON.parse(currentUser);
    });
}

export class AuthService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient) 
{
   this.currentUserSubject = null;
   this.currentUser = null;
   const currentUser = localStorage.getItem('currentUser');
   if (currentUser !== 'undefined') {
     this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(currentUser));
     this.currentUser = this.currentUserSubject.asObservable();
 }
}

    constructor(
    private router: Router,
    private authenticationService: AuthService) 
    {
       this.authenticationService.currentUser.subscribe(currentUser => {
       this.currentUser = currentUser;
       });
    }