如何告诉导航栏用户刚刚登录或注销角2和引导

Question

我有一个引导程序导航栏，它有像用户配置文件和其他“登录后”组件的按钮。 现在，我登录或注销后，我想告诉组件拥有导航栏，用户不再有效或与用户刚刚登录的组件相反，因此在导航栏上显示元素

Answer 1

我从官方角度2 example工具这个想法，展示父母和孩子之间的沟通。虽然它不是父母和孩子，但我认为它是一种很好的方法，它的工作对我来说是完美的。好的，所以我们需要为此创建一个服务，以帮助在登录组件（和注册组件）和导航栏组件之间进行通信。 我称之为：LocalStorageService，因为我将用户对象存储在本地存储中。

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

@Injectable() 
export class LocalStorageService { 

    private missionAnnouncedSource = new Subject<string>(); 
    private logoutAnnoucedSource = new Subject<string>(); 

    loginAnnounced$ = this.missionAnnouncedSource.asObservable(); 
    logoutAnnounced$ = this.logoutAnnoucedSource.asObservable(); 

    announceLogin(mission: string) { 
    this.missionAnnouncedSource.next(mission); 
    }  

    announceLogout(){ 
    this.logoutAnnoucedSource.next(null); 
    } 
} 

很大，现在我们只需要宣布登录或注销的导航栏组件登录内部或注册组件：在导航栏部分我把它叫做app.component

import { Component, OnInit }     from '@angular/core'; 
import { Router }        from '@angular/router'; 
import { LocalStorageService } from '../../services/localStorage.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent implements OnInit { 
    model: any = {}; 
    loading = false; 

    constructor(
     private localStorageService: LocalStorageService) 
     { } 

    login() { 
     this.announce(); 
     this.router.navigate(['/UserProfile']);    
    } 


    announce() { 
     let currentUser = JSON.parse(localStorage.getItem('currentUser')); 
      if (currentUser && currentUser.token) { 
       return this.localStorageService.announceLogin(currentUser); 
      }  
    } 
} 

好，现在我们需要 “听” 到这些公告：

import { Component } from '@angular/core'; 
import { LocalStorageService } from './services/localStorage.service'; 
import { Subscription } from 'rxjs/Subscription'; 


@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    templateUrl: 'app.component.html', 
}) 
export class AppComponent { 
    subscription: Subscription; 

    constructor(private localStorageService: LocalStorageService) { 

     this.subscription = localStorageService.loginAnnounced$.subscribe(
      currentUser => { 
      this.currentUser = currentUser; 
     }); 

     this.subscription = localStorageService.logoutAnnounced$.subscribe(
      empty => { 
      this.currentUser = null; 
     }); 
     //when the app refresh or initialized 
     this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    } 
} 

现在这是app.component.html：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container-fluid"> 
     <div class="navbar-header"> 
      <button *ngIf="currentUser" type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img alt="Brand" src="app/images/syte_logo.png"></a> 
     </div> 
    <div class="collapse navbar-collapse" [collapse]="isCollapsed"> 
     <ul *ngIf="currentUser" class="nav navbar-nav"> 
      <li *ngIf="currentUser" routerLinkActive="active"><a [routerLink] = "['/Analytics']" (click)="isCollapsed = !isCollapsed">Analytics</a></li> 
      <li *ngIf="currentUser" routerLinkActive="active"><a [routerLink] = "['/Integration']" (click)="isCollapsed = !isCollapsed">Integration</a></li> 
      <li *ngIf="currentUser" routerLinkActive="active"><a [routerLink] = "['/FAQ']" (click)="isCollapsed = !isCollapsed">F.A.Q</a></li> 
      <li *ngIf="currentUser" routerLinkActive="active"><a [routerLink] = "['/Terms']" (click)="isCollapsed = !isCollapsed">Terms</a></li> 
      <li *ngIf="currentUser" routerLinkActive="active"><a [routerLink] = "['/Contact']" (click)="isCollapsed = !isCollapsed">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li *ngIf="currentUser" routerLinkActive="active"> 
       <a [routerLink] = "['/UserProfile']" (click)="isCollapsed = !isCollapsed"> 
       Hi, {{currentUser.name}} 
      </a> 
      </li> 
     </ul> 
    </div> <!--collapse--> 
    </div> 
    </nav> 

    <div class="container"> 
     <div class="starter-template"> 
      <alert-custom></alert-custom> 
      <router-outlet></router-outlet> 
     </div> 
    </div>