如何在Angular中将数据从登录服务传递到NavBar组件？

用户登录后，我必须更新navbar组件中的用户名。我的组件结构如下。 app.component.ts

<app-root>
  <nav-bar></nav-bar>
  <router-outlet></router-outlet>  // <-- Login form comes here
</app-root>

如何在这些同级组件之间共享数据？

login-service.ts 导航杆 nav-bar.html

欢迎，{{username}
注销

我认为您应该在服务文件中使用行为主题，并编写如下代码

export class loginService {
        name:Subject<string> = new Subject();

        broadcastLoginChange(text:string) {
            this.name.next(text);
        }

this.logiService.name.subscribe((val) => {
      this.username=val;
    });

在你的导航栏里，像这样订阅这项服务

export class loginService {
        name:Subject<string> = new Subject();

        broadcastLoginChange(text:string) {
            this.name.next(text);
        }

this.logiService.name.subscribe((val) => {
      this.username=val;
    });

---

这将帮助您进行更改，因为您的登录名将更改导航栏中的用户名将自动更改

修改服务并存储当前用户：

@Injectable()
    export class LoginService {
      currentUser: any;

      login(un,pwd) {
       this.currentUser = un;
      }
    }

将登录服务包括在提供商app.module.ts中

import { LoginService } from "app/services/login.service";
    @NgModule({
      declarations: []
    providers: [
        LoginService
    ]
    })
    export class AppModule { }

现在，您可以在导航栏组件中使用LoginService的currentUser变量

export class NavBarComponent {
 constructor(
    private authService:AuthenticationService
    ) {}
}

这种方法的优点是：

• 可以在多个页面上使用登录详细信息
• 登录详细信息更改时的动态更新
• 分离应用程序中共享的登录逻辑
• 广播不是最好的方法，因为它广播数据，任何模块都可以订阅并使用它

我希望这对你有帮助。快乐编码

this.logiService.name.subscribe((val) => {
      this.username=val;
    });

@Injectable()
    export class LoginService {
      currentUser: any;

      login(un,pwd) {
       this.currentUser = un;
      }
    }

import { LoginService } from "app/services/login.service";
    @NgModule({
      declarations: []
    providers: [
        LoginService
    ]
    })
    export class AppModule { }

export class NavBarComponent {
 constructor(
    private authService:AuthenticationService
    ) {}
}