两个Angular2组件之间的通信问题

我有2个Angular2组件，我希望能够共享一个值

我的应用程序组件代码是：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

最后，我的标题组件视图是：

<div id="wrapper">
  <section>
      <div id="topHeader">
          <div class="oLogo">
              <img id="OLogoImg" src="../../assets/images/Luceco-O-Logo-Transparent.png" alt="o-logo" height="20" />
          </div>
      </div>
  </section>
</div>
<div class="container body-content">
  <div id="header">
      <div class="pageWrap">
          <a id="logo" >
              <img id="logoImg" src="../../assets/images/Luceco-Logo-Transparent.png" alt="logo" height="28" />
          </a>
          <ul id="menu">
              <li id="home-menu" class="top-level home-menu">
              <a href="#">Home</a>
              </li>

<--FOLLOWING COMPONENT NEEDS TO BE DISPLAYED AFTER LOGIN -->

              <li *ngIf="currentUser != null" id="logout-menu" class="top-level logout-menu">
                <a href="#" (click)="logout()">Log Out</a>
                </li>
          </ul>
      </div>
  </div>

登录服务：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Router } from '@angular/router';

import 'rxjs/rx';
import { ConnectableObservable } from 'rxjs/rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

import { User } from '../models/user';

@Injectable()
export class LoginService {
  private authApiUrl = 'http://192.168.1.201/ForkliftHelperAPI/api/Auth';

  private loginBehaviourSubject = new BehaviorSubject<boolean>(false);
  public loginObservable = this.loginBehaviourSubject.asObservable();

  constructor(private router: Router,
              private _http: Http) { }

  loginStatusChange(isLoggedIn: boolean) {
    this.loginBehaviourSubject.next(isLoggedIn);
  }

  login(user: User): ConnectableObservable<any> {
    let result: User;
    const body = JSON.stringify(user);
    const headers = new Headers({
      'Content-Type': 'application/json'
    });
    const options = new RequestOptions({
      headers: headers
    });
    const obsResponse = this._http.post(this.authApiUrl, body, options)
                                .map(res => res.json())
                                .publish();

    obsResponse.subscribe(
                (res: User) => {
                  result = res;
                  if (result) {
                    user.securityGroups = result.securityGroups;
                    sessionStorage.setItem('user', JSON.stringify(user));
                    this.router.navigate(['home']);
                  }
                },
                err => console.log(err)
    );
    return obsResponse;
  }

  logout() {
    sessionStorage.removeItem('user');
    this.router.navigate(['login']);
  }

  getCurrentUser() {
    const storedUser = JSON.parse(sessionStorage.getItem('user'));
    if (!storedUser) {
      return null;
    }
    return new User(storedUser.username, storedUser.password, storedUser.securityGroups);
  }

  isLoggedIn() {
    if (this.getCurrentUser() === null) {
      this.router.navigate(['login']);
    }
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Headers，RequestOptions，Response}；
从'@angular/Router'导入{Router}；
进口“rxjs/rx”；
从'rxjs/rx'导入{ConnectableObservable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从“rxjs/Observable”导入{Observable}；
从“../models/User”导入{User}；
@可注射（）
导出类登录服务{
私有authApiUrl=http://192.168.1.201/ForkliftHelperAPI/api/Auth';
private loginBehaviourSubject=新行为Subject（false）；
public loginObservable=this.loginBehaviourSubject.asObservable（）；
构造函数（专用路由器：路由器、，
私有http:http）{}
loginStatusChange（isLoggedIn:boolean）{
this.loginBehaviourSubject.next（isLoggedIn）；
}
登录（用户：用户）：可连接可观察{
让结果：用户；
const body=JSON.stringify（用户）；
const headers=新的头({
“内容类型”：“应用程序/json”
});
const options=新请求选项({
标题：标题
});
const obsResponse=this.\u http.post（this.authApiUrl，body，options）
.map（res=>res.json（））
.publish（）；
obsResponse.subscribe(
（res:User）=>{
结果=res；
如果（结果）{
user.securityGroups=result.securityGroups；
setItem（'user'，JSON.stringify（user））；
this.router.navigate（['home']）；
}
},
err=>console.log（err）
);
返回响应；
}
注销（）{
sessionStorage.removietem（'user'）；
this.router.navigate（['login']）；
}
getCurrentUser（）{
const storedUser=JSON.parse（sessionStorage.getItem（'user'）；
if（！storedUser）{
返回null；
}
返回新用户（storedUser.username、storedUser.password、storedUser.securityGroups）；
}
伊斯洛格丁（）{
if（this.getCurrentUser（）==null）{
this.router.navigate（['login']）；
}
}
}

因此，基本上我的问题是，当LoginComponent的登录方法完成时，我希望它在HeaderComponent中设置currentUser变量，以便在路由器出口生成下一页时，标头正确显示注销按钮。如果在重定向后手动刷新页面，则更新会正确进行。但是，重定向时不会刷新页眉，只刷新路由器出口的内容

我尝试过使用服务，也尝试过使用@Input（）和@Output（），但没有成功，可能是我用错了

我的主要问题似乎是，当重定向和导航发生时，页眉和页脚组件不会刷新，因为只有

中的组件受到影响。我这样做是为了避免在每个其他组件中都有页眉和页脚组件，但如果这是实现我所需要的唯一方法，那就这样吧

---

任何帮助都将不胜感激。

首先，向根模块提供

登录服务

，而不是在

标题和
登录组件中提供

     @NgModule({
         // other things
      providers: [LoginService,..........],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

对于这种组件到组件的通信，必须使用
eventemiter
或Rxjs
BehaviorSubject

通常，更改一个组件中的任何值不会触发其他组件中的更改，除非您明确通知angular这样做。
有两种机制可以实现这一点

最好的方法是使用RxJs或用于此目的

您可以在
登录服务
中创建
行为主题
，步骤如下：

登录服务类：

   import 'rxjs/add/operator/do';
   import 'rxjs/add/operator/share';

  export class LoginService {

       private loginbehaviorSubject = new BehaviorSubject<boolean>(true);
       public loginObservable$ = this.loginbehaviorSubject.asObservable();

      loginStatusChange(isLoggedIn: boolean){
         this.loginbehaviorSubject.next(isLoggedIn);
      }


      login(user: User): ConnectableObservable<any> {
        let result: User;
        const body = JSON.stringify(user);
        const headers = new Headers({
          'Content-Type': 'application/json'
        });
        const options = new RequestOptions({
          headers: headers
        });
        return this._http.post(this.authApiUrl, body, options)
                                    .map(res => res.json())
                                    .do( (res: User) => {
                                          result = res;
                                          if (result) {
                                            user.securityGroups = result.securityGroups;
                                            sessionStorage.setItem('user', JSON.stringify(user));
                                          }
                                        },
                                        err => console.log(err)
                                    )
                                    .share();
      }
      removeUserFromSession(){
          if(sessionStorage.getItem('user')){
              sessionStorage.removeItem('user');
          }       
      }
      logout() {
        this.removeUserFromSession();
        this.router.navigate(['login']);
      }

  }

在HeaderComponent中：

  export class HeaderComponent implements OnInit {
  public currentUser: string;

  constructor(private loginService: LoginService) { }

  ngOnInit() {
    const currentUser = this.loginService.getCurrentUser();
    if (currentUser !== null) {
      this.currentUser = currentUser.username;

    }

    this.loginService.loginObservable$
     .subscribe( (isStatusChanged) => {
         const currentUser = this.loginService.getCurrentUser();
         this.currentUser = currentUser.username;
     });
  }

  logout() {
    this.loginService.logout();
    this.loginService.loginStatusChange(true); // notice this line
  }
}

您应该使用EventBus，创建一个单例服务，它必须是主模块中的一个提供程序，而不是将其作为另一个地方的提供程序

这个想法是：

login.component.ts

constructor(public eventBus: EventBus) {}

onLoginSuccess(currentUser: any): void {
   this.eventBus.onLoginSuccess.next(currentUser);
}

constructor(public eventBus: EventBus) {
   this.eventBus.onLoginSuccess.subscribe((currentUser: any) => this.currentUser = currentUser);
}

header.component.ts

constructor(public eventBus: EventBus) {}

onLoginSuccess(currentUser: any): void {
   this.eventBus.onLoginSuccess.next(currentUser);
}

constructor(public eventBus: EventBus) {
   this.eventBus.onLoginSuccess.subscribe((currentUser: any) => this.currentUser = currentUser);
}

eventbus.service.ts

@Injectable()
export class EventBus {
   onLoginSuccess: Subject<any> = new Subject();
}

@Injectable（）
导出类事件总线{
onloginsucess:Subject=newsubject（）；
}

当然，您必须处理订阅和其他一切，这只是一个操作

用户完成登录后，
eventBus
将使用
onloginsucess
事件点击
标题组件

@Injectable()
 export class LoginService {
    static instance: LoginService;
    constructor() {
    return LoginService.instance = LoginService.instance || this;
    }
}

将此单例服务包括到route oulet组件和header组件。
在header component中，您可以使用ngOnChanges或ngDoCheck方法查看登录服务中的变量，一旦其值更改，函数中的代码将执行而不刷新

ngOnChanges（更改：SimpleChanges）{}

ngDoCheck（）{}
如果您能进行复制以查看您所做的一切，我们将不胜感激。是的，服务不用于
@Input
/
@Output
，这是为了在父/子组件之间建立通信。让服务持有
currentUser
，并使用getter/setter管理其状态。然后，您的组件应该通过依赖项注入从getter使用此数据。在您的
LoginService
中声明一个rxjs
Subject
，并使用它来发出
currentUser
，订阅它<
@Injectable()
 export class LoginService {
    static instance: LoginService;
    constructor() {
    return LoginService.instance = LoginService.instance || this;
    }
}