如何告訴導航欄用戶剛剛登錄或註銷角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>