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

【问题标题】：Communication issue between two Angular2 components两个Angular2组件之间的通信问题
【发布时间】：2018-03-23 09:07:41
【问题描述】：

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

我的App组件代码是：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

我在<router-outlet></router-outlet> 中加载的登录组件打字稿代码是：

import { Component, OnInit } from '@angular/core';
import { MatInput } from '@angular/material';
import { Router } from '@angular/router';

import { LoginService } from '../../services/login.service';
import { User } from '../../models/user';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  providers: [ LoginService ],
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public user = new User('', '', new Array<string>());
  public errorMsg = '';
  public isLoading = false;

  constructor(
    private loginService: LoginService,
    private router: Router
  ) { }

  ngOnInit() {
    if (this.loginService.getCurrentUser() !== null) {
      this.router.navigate(['home']);
    }
  }

  login() {
    this.isLoading = true;
    const obs = this.loginService.login(this.user);
    obs.subscribe(
      res => {
        if (res !== true) {
          this.errorMsg = 'Incorrect Username / Password';
          this.loginService.loginStatusChange(false);
        } else {
          this.loginService.loginStatusChange(true);
        }
      },
      err => {
        this.isLoading = false;
        this.errorMsg = err._body;
        this.loginService.loginStatusChange(false);
      },
      () => {
        this.isLoading = false;
      }
    );
    obs.connect();
  }
}

我的标题组件打字稿是：

import { Component, OnInit } from '@angular/core';

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

import { LoginService } from '../../services/login.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  providers: [ LoginService ],
  styleUrls: ['./header.component.css']
})
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
                  .map((status) => {
                    if (status) {
                      return this.loginService.getCurrentUser();
                    }
                    return null;
                  }
                )
                .subscribe((user) => {
                  const thisUser = this.loginService.getCurrentUser();
                  if (thisUser !== null) {
                    this.currentUser = thisUser.username;
                  }
                });
  }

  logout() {
    this.loginService.logout();
    this.loginService.loginStatusChange(false);
  }
}

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

<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']);
    }
  }
}

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

我尝试过使用服务以及使用@Input() 和@Output() 但没有运气，也许我一直在错误地使用它们。

我的主要问题似乎是当重定向和导航发生时，页眉和页脚组件不会刷新，因为只有<router-outlet></router-outlet> 中的组件会受到影响。我这样做是为了避免在每个其他组件中都必须有页眉和页脚组件，但如果这是实现我要求的唯一方法，那就这样吧。

任何帮助将不胜感激。

【问题讨论】：

如果你能复制一下看看你做了什么，我们将不胜感激
Angular2 - Share data between components using services的可能重复
很可能是重复
是的，一个服务没有与@Input/@Output一起使用，这是为了建立父/子组件之间的通信。有一个服务持有 currentUser 并使用 getter / setter 管理其状态。然后，您的组件应该通过依赖注入从 getter 中使用这些数据。
在您的LoginService 中声明一个rxjs Subject，并使用它来发出currentUser，在您的标头组件中订阅Subject。你会在这里找到很多关于这个的答案。例如，看到这个答案，这正是你要找的：stackoverflow.com/a/46049546/1791913

标签： angular typescript angular2-routing angular-components

【解决方案1】：

创建一个 LoginService 的单例实例。

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

在 route-outlet 组件和 header 组件中都包含这个单例服务。在 header 组件中，您可以使用 ngOnChanges 或 ngDoCheck 方法来观察登录服务中的变量，一旦其值发生更改，函数内部的代码将执行而不刷新。

ngOnChanges(changes: SimpleChanges) {}

ngDoCheck() {}

【讨论】：

【解决方案2】：

首先，将您的LoginService 提供给您的根模块，而不是在您的Header 和Login 组件中提供它。

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

您必须使用 EventEmiiter 或 Rxjs BehaviorSubject 进行这种组件到组件的通信。

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

为此，最好的方法是使用 RxJs Subject 或 BehaviorSubject。

您可以在loginService 中创建BehaviorSubject，过程如下：

登录服务类：

   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']);
      }

  }

在LoginComponent：

  ngOnInit() {
    if (this.loginService.getCurrentUser() !== null) {
      this.router.navigate(['home']);
    } 
  }

  login() {
    this.isLoading = true;
    const obs = this.loginService.login(this.user);
    obs.subscribe(
      res => {
        this.loginService.loginStatusChange(true);
        if (res !== true) {
            this.errorMsg = 'Incorrect Username / Password';
        } else {
            this.router.navigate(['home']);
        }
      },
      err => {
        this.isLoading = false;
        this.errorMsg = err._body;
        this.loginService.loginStatusChange(true);
      },
      () => {
        this.isLoading = false;
      }
    );
}

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

【讨论】：

不，因为标头已经初始化，ngOnInit 不会再次触发。这行不通。但是，我同意只提供一次服务的部分。
你不应该对你的每一个答案都投反对票。如果您不喜欢任何答案，您可以发送评论。你知道这完全令人沮丧。你应该沟通。这样你才能得到正确的答案。
我投了反对票，因为这个答案不能解决问题。根本不想气馁:) 赞成，现在至少按照这种方法纠正答案：stackoverflow.com/a/46049546/1791913
您是否尝试过使用 EventEmitter 或 BehaviorSubject 进行通信？顺便说一句，你应该给你的 LoginService 类的 sn-p。
这不会更新标题。我错过了什么吗？我将使用新版本更新我的代码并包含登录服务代码

【解决方案3】：

您应该使用 EventBus，创建一个单例服务，它必须是主模块内的提供程序，并且不要将其作为提供程序放在其他地方。

想法是：

constructor(public eventBus: EventBus) {}

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

header.component.ts

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();
}

当然，您必须处理订阅和其他所有事情，这只是一个方法。

当您的用户完成登录后，eventBus 将通过onLoginSuccess 事件点击header component。

【讨论】：

这似乎是一个不错的方法，但是我正在努力让它发挥作用，您能否扩展您的答案以显示正确的订阅方式等？
我似乎无法让 HeaderComponent 检测更改并相应地调整显示