각도 2 및 부트 스트랩에 로그인하거나 로그 아웃 한 사용자에게 알려주는 방법

Question

사용자 프로필 및 기타 "로그인 후"구성 요소와 같은 단추가있는 부트 스트랩 탐색 모음이 있습니다. 지금 내가 로그인하거나 로그 아웃 한 후 사용자가 더 이상 유효하지 않은 탐색 모음을 소유하고있는 구성 요소 또는 사용자가 방금 로그인 한 구성 요소의 반대쪽에있는 요소에 Navbar의 요소를 표시하도록 말합니다.

Answer 1

나는이 아이디어를 부모와 자녀 사이의 커뮤니케이션을 보여주는 공식적인 각도 2 example에서 사용합니다. 그것의 부모님과 자녀가 아니라 좋은 접근 방식과 완벽하게 나를 위해 일한다고 생각합니다. 오케이, 로그인 컴포넌트 (그리고 레지스터 컴포넌트)와 탐색 막대 컴포넌트 사이의 통신을 도와 줄 수있는 서비스를 생성해야합니다. 로컬 저장소에 사용자 개체를 저장하기 때문에 LocalStorageService라고 부릅니다. 내가 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 { 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); 
    } 
} 

큰, 이제 우리는 단지 구성 요소에게 로그인을 발표하거나 로그인 내부의 네비게이션 바의 구성 요소에 로그 아웃 또는 등록해야 우리는 그 발표에 "수신"해야

:

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입니다