Question

所以我已阅读，但未找到解决我问题的方法。 我的问题就像我的标题一样。

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

我想要做的是能够使用Auth0等身份验证服务通过单击导航栏（NavbarComponent）中的“登录”按钮对用户进行身份验证，然后在主页（HomepageComponent）上呈现他/她的个人资料。反之亦然，当我单击“注销”按钮时，应删除用户的配置文件内容。

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

我尝试在AppComponent和NavbarComponent之间使用共享服务，然后使用 @Input（）从Parent传输到子主页，即ComponentComponent。

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

非常感谢任何信息或见解!!

已更新

HomepageComponent

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处的源代码。它建立在Angularfire2之上，Redux（ngrx / store）用于状态管理。因此，您需要首先了解redux工作流程。如果您已经知道，那么这应该是一个很好的参考。我会看看我是否可以在没有redux方式的情况下拉出一个。

Answer 2

您需要在导航栏和家庭组件中注入服务。当用户点击导航栏上的“登录”按钮时，调用服务上的setter，它将执行三项操作：

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

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

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

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

2 个答案: