如何在Angular 6中更改组件的状态？

Question

I am writing an application which includes authentication of the user. If the user has successfully logged in the navbar will show his username or it will be the default Login/Signup button. I'm able to achieve this partially. After i login successfully and it redirects to my homepage component, the navbar doesn't show my username but when i refresh the page it shows my username. Can anyone help me resolve this issue?

This is my app.component.html

<app-navbar></app-navbar>
<router></router-outlet>
<app-footer></app-footer>

This is my navbar.component.html

<nav class="navbar navbar-expand-lg shadow">
  <img class="navbar-dark" src="../../assets/images/ACADEMY.png" alt="devsmen academy logo">
  <button class="navbar-toggler remove-border" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-controls="collapse-navbar" aria-expanded="false" aria-label="Toggle navigation"
          (click)="isCollapsed =  !isCollapsed" [attr.aria-expanded]="isCollapsed">
    <span class="navbar-toggler-icon"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>
  <div class="collapse navbar-collapse" id="collapse-navbar" [ngbCollapse] = "isCollapsed">
    <div class="navbar-nav mx-auto">
      <a class="nav-item nav-link active text-dark" routerLink=""><b>Home</b>
        <span class="sr-only">Home</span>
      </a>
      <a class="nav-item nav-link text-dark" routerLink="academy-home"><b>Academy</b></a>
      <a class="nav-item nav-link text-dark" routerLink=""><b>CodeWars</b></a> <!-- We don't have a component for codewars-->
      <a class="nav-item nav-link text-dark" routerLink="team-page"><b>Team</b></a>
      <a class="nav-item nav-link text-dark" routerLink="blog-page"><b>Blog</b></a>
    </div>
    <div class="navbar-nav" *ngIf="!hasLoggedIn">
      <a class="nav-item nav-link text-dark" routerLink="sign-in">Login</a>
      <a class="nav-item nav-link text-dark" routerLink="sign-up"> SignUp</a>
    </div>
    <div class="navbar-nav" *ngIf="hasLoggedIn">
      <a class="nav-item nav-link text-dark" [routerLink]="route">{{ username }}</a>
    </div>
  </div>
</nav>

This is my navbar.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {UserService} from '../services/users/user.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public isCollapsed = true;
  @Input() private hasLoggedIn = false;
  @Input() private route;
  @Input() private username;
  constructor(private service: UserService) { }

  async ngOnInit() {
    // check if the user has logged in
    if ( localStorage.getItem('userid') !== null) {
      this.hasLoggedIn = true;
      this.route = 'profile/' + localStorage.getItem('userid');
      // check if username exists local
      if ( localStorage.getItem('username') === null ) {
        // this creates a new item and stores it in localStorage
        this.service.getUserById(localStorage.getItem('userid')).subscribe( res => {
          localStorage.setItem('username', res.username);
        });
      }
    }
    this.username = localStorage.getItem('username');
  }
}

Answer 1

You can save you user object (id, username, first_name, last_name ...) in localStorage as JSON format and below is example:

login.component.ts

    login() {
      this.service.login(user_name, password).subscript(
        (res: any) => {
          localStorage.setItem('userProfile', JSON.stringify(res.user));
        }
      );
    }

navbar.component.ts

 ngOnInit() {
      this.user = JSON.stringify(localStorage.getItem('userProfile'));
 }

navbar.component.html

{{user.first_name}}
{{user.last_name}}