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

Question

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

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

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

在导航栏组件中，我可以读取当前登录的用户 onInit，获取名称并显示它。这种方式工作得很好，除了在您重新加载页面（或调用导航栏的 onInit 以读取用户并获取值）之前它不会正常工作。如果这样做，我需要在设置所有数据后通过登录组件（位于 <router-outlet> 内）调用导航栏的 onInit。
另一种方法是遵循此（第 3 节。兄弟姐妹）这意味着在登录组件中输出发送用户名（目前有效），接收它在 app 组件中（通过 router-outlet 标签）并通过 navbar 组件中的输入发送接收到的数据。我也试过这个，但应用程序组件不会接收数据（我猜是因为在路由器插座内）。

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

(nombreLogin是登录组件中的Output EventEmitter；recibeNombre()是app组件中的方法，它应该获取名称并将其值设置为nombreParent，它将被输入到navbar组件。我不是粘贴代码，因为字面上就是这样，并且与 post)

中的代码相同

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

谢谢。

Answer 1

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

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

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

Sending data through sibling components in Angular

router

input

siblings

output

angular