Twitter bootstrap 如何告知导航栏用户刚刚在angular 2和bootstrap中登录或注销

我有一个引导导航栏，上面有按钮，比如用户配置文件和其他“登录后”组件。

---

现在，在我登录或注销后，我想告诉拥有导航栏的组件，用户不再有效，或者与用户刚刚登录的组件相反，因此在导航栏上显示元素，这是官方angular 2的想法，演示了父子之间的通信。虽然它不是一个父母和孩子，但我认为它是一个很好的方法，对我来说非常适合。好的，所以我们需要为此创建一个服务，它可以帮助在登录组件（和注册组件）和导航栏组件之间进行通信。 我将其命名为：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 } 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>

切换导航

分析
集成
F.A.Q.
术语
联系



你好，{currentUser.name}

您尝试过什么？你能提供一些代码吗？如果你能同时做这两件事，你会得到更好的回应。@A1raa我回答了我的问题，如果你能对此发表评论并让我知道你的想法，那将是非常棒的……如果你有更好的解决方案，我将很高兴听到关于iTunes行为子主题的消息

 <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>