如何通过 Angular 中的共享服务在 AppComponent 的 2 个直接子组件之间进行通信？

Question

所以我已阅读，但没有找到解决问题的方法。 我的问题正如我的标题所问的那样。

这是我的问题，我创建了 2 个组件（NavbarComponent 和 HomepageComponent）。 NarbarComponent 嵌套在 AppComponent 中并处理身份验证，而 HomepageComponent 是 启用路由 组件和应用程序的默认页面。

我想要做的是能够使用像 Auth0 这样的身份验证服务通过单击导航栏中的登录按钮 (NavbarComponent) 来对用户进行身份验证，然后在主页 (HomepageComponent) 上呈现他/她的个人资料。反之亦然，当我单击注销按钮时，用户的个人资料内容应该被删除。

我尝试配置一些架构，但无济于事。首先，我尝试使用共享服务将 NavbarComponent 转换为 HomepageComponent，但它只在页面重新加载时更新 HomepageComponent。

我尝试在 AppComponent 和 NavbarComponent 之间使用共享服务，然后使用 @Input() 从 Parent 到 Child、HomepageComponent 进行传输。

然后我在 AppComponent 和 HomepageComponent 之间运行共享服务时尝试了从 NavbarComponent 到 AppComponent 的 @Output() 和 EventEmitter。

任何信息或见解将不胜感激！

更新

主页组件

import { Component, OnInit } from '@angular/core'
import { Authenticated } from '../definitions/authenticated'
import { AuthCheckService } from '../shared/auth-check.service'

@Component({
  selector: 'afn-homepage',
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit{

  private authenticated: Authenticated;
  isAuthenticated: boolean;
  profile: any;

  constructor(public authCheckService: AuthCheckService) { }

  ngOnInit() {
    this.authCheckService.getAuthenticated().subscribe(authenticated => {
      console.log('Receiving auth info in home component from navbar component');
      this.authenticated = authenticated;
      this.isAuthenticated = this.authenticated.isAuthenticated;
      this.profile = this.authenticated.profile;
    });
  }

}

我尝试制作plunker here。我无法加载它，但它确实包含大部分代码和 AuthService 的模拟。

Answer 1

我猜你想要的是可以在这个应用程序中运行的东西..https://angularhunt.com

请查看https://github.com/aviabird/angularhunt 的源代码。 它建立在带有 Redux(ngrx/store) 的 Angularfire2 之上，用于状态管理。所以你需要先了解 redux 工作流程。如果您已经知道这一点，那么这应该是一个很好的参考。 我会看看我是否可以在没有 redux 方式的情况下拉出一个。

Answer 2

您需要将服务注入到导航栏和主页组件中。当用户点击导航栏上的登录按钮时，调用服务上的 setter 来做三件事：

1. 进行身份验证
2. 将用户的凭据存储在服务的类变量（例如用户）中
3. 使用 EventEmitter，发出携带用户对象的事件

另外，在服务中定义一个 getter，它将返回变量 user 的值。

home 组件获得了在构造函数中注入的相同服务实例。订阅服务的发射器以在用户注销或重新登录时获取通知。在 ngOnInit 方法中，调用服务上的 getter 以获取用户的值。然后发出 http 请求以获取用户的个人资料数据。