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

Question

我的 App 结构如下（app-component）：

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

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

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

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

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

(nombreLogin 是登录组件中的输出 EventEmitter；recibeNombre() 是应用程序组件中的方法，它应该获取名称并将其值设置为 nombreParent，它将被输入到导航栏组件。我没有粘贴代码，因为就是字面意思，和帖子里的一样）

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

谢谢。

Answer 1

您需要使用服务。 一个可能的解决方案是，如果您的 logincomponent 持有该值，则创建一个共享该值的服务：

export class LoginInfoService {

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

  constructor() { 

  }

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

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

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