Angular 2显示登录|注销链接

我想显示登录|登录用户基础上的注销链接 . 我在auth.service中的'm saving ' currentUser'对象： localStorage.setItem('currentUser', JSON.stringify(user));

当我尝试在navbar.component.ts中 console.log('navbar.component',this.currentUser); 时，它显示 null ，但是当它在home.component中控制它时，它显示我的用户，home.component受到使用auth guard的保护，请查看我的代码并建议一些好的解决方案

角度版本： 4.0.2

目录结构：

quickstart
 -src
   --app
       --_guards
       _services
       --navbar
           navbar.component.ts
       --home
         home.component.ts
      --login
         login.component
   app.component.ts
   app.component.html 
   app-routing.module.ts

navbar.component.ts

@Component({
    selector: 'navbar',
    templateUrl: './navbar.component.html'
})

export class NavbarComponent implements OnInit{
    private projectName;
    private currentUser: any;
    constructor(){this.projectName = 'Web Shop Admin';}
    ngOnInit(){
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        console.log('navbar.component',this.currentUser);
        // null in console
    }
}

navbar.component.html

<ul *ngIf="currentUser !== null " class="navbar-nav ml-auto" >
     <li class="nav-item"><a class="nav-link">Welcome {{currentUser.name}}</a></li>

     <li class="nav-item"><a class="nav-link" [routerLink]="['/login']">(Logout)</a></li>
  </ul>

home.component.ts

@Component({
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit{
    currentUser: any;
    ngOnInit(){
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        console.log('home.component',this.currentUser);
       //display me the current user
    }
}

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  { 
    private currentUser: any;
    constructor(){
         this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        //display me the current user
    }
}

app.component.html

<navbar></navbar>

<alert></alert>

<router-outlet></router-outlet>

<footer class="container-fluid">
    <p class="text-center small">©2016-2017 Company</p>
</footer>

APP-routing.module.ts

...
export const routes: Routes = [
    {path:'', redirectTo:'/home', pathMatch:'full'},
    {path:'home', component: HomeComponent, canActivate: [AuthGuard]},
    {path:'login', component: LoginComponent },
    {path:'category', component:CategoryComponent, canActivate:[AuthGuard]},
    {path:'product', component:ProductComponent, canActivate:[AuthGuard]},
    {path:'**', redirectTo:''}
]
....