通过 Angular 中的兄弟组件发送数据

编程问答 2022-05-26

问题描述

我的应用程序结构如下（应用程序组件）：

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

我想在导航栏中显示用户名，问题是为了做到这一点，有两种方法：

  1. 在导航栏组件中，我可以读取当前登录的用户 onInit，获取名称并显示它。这种方式工作得很好，除了在您重新加载页面之前它不会正常工作（或调用导航栏的 onInit 以读取用户并获取值）。如果这样做，我需要在设置所有数据后通过登录组件（位于 onInit 内）调用导航栏的 <router-outlet>。

  2. 另一种方式是遵循这个 post（第 3 节。兄弟姐妹），这意味着在登录组件中输出用户名（目前有效），在应用程序组件中接收它（通过路由器插座标签）并通过导航栏组件中的输入发送接收到的数据。我也试过这个，但应用程序组件不会接收数据（我猜是因为在路由器插座内）。

<app-navbar [nombreNav]="nombreParent"></app-navbar>
<router-outlet (nombreLogin)="recibeNombre($event)"></router-outlet>
<app-footer></app-footer>

（nombreLogin 是 login 组件中的 Output EventEmitter；recibeNombre() 是 app 组件中的方法，它应该获取名称并将其值设置为 nombreParent，它将被输入到导航栏组件。我没有粘贴代码，因为从字面上看，和帖子中的一样）

所以我需要一种方法来调用导航栏的 onInit（我已经看到使用与选项 2 相同的输出方式是可能的）或通过 <router-outlet> 发送数据。我该如何解决这个问题？

谢谢。

解决方法

您需要使用服务。 一个可能的解决方案，如果是您的登录组件保存该值，则创建一个共享该值的服务：

export class LoginInfoService {

  public loginNameSubject = new BehaviorSubject<string>('');

  constructor() { 

  }

  public broadCastLoginName(name:string){
    this.loginNameSubject.next(name);
  }
}

然后，设置此值的组件（例如：您的登录组件）以及需要读取此值的所有组件（例如：您的导航栏）都需要注入此服务，以便它们可以管理或读取此共享可观察对象： 

export class NavbarComponent{

    public loginName: Observable<string>;

    constructor(private loginInfoService: LoginInfoService) {

      this.loginName = this.loginInfoService.loginNameSubject.pipe();

      ....

    }

在 navbar.component.html 中：

<span>{{loginName | async}}</span>

export class LoginComponent{

    public loginName: string;

    constructor(private loginInfoService: LoginInfoService) {}

    someFunction(){
        ....
        this.loginInfoService.broadCastLoginName(loginName);
        ....
    }
angularangularinputinputoutputoutputrouterrouterroutersiblings