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

Question

After user logs in, I have to update the username in the navbar component.My component structure is as follow. app.component.ts

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

nav-bar.html

 <ul class="nav navbar-nav">
    <li ><h4 style="display:inline-block">Welcome ,</h4><b>{{username}}</b></li>
    <li *ngIf="!isLoggedIn"><a (click)="logout()">Log out</a></li>
 </ul>

login-service.ts

@Injectable()
export class LoginService  {
 login(un,pwd) {
   ...
 }
}

How to share data between these sibling components?

Answer 1

I think you should use behavior subject for this in your service file write a code like this

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

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

In your login component you should use this code

this.loginService.broadcastLoginChange(username)

and in your navbar subscribe to this service like this

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

this will help you as it will work on change as your login name will change the username in the navbar will automatically change

Answer 2

login-service.ts

@Injectable()
export class LoginService  {
 login(un,pwd) {
   // your implementation here
  return un;
 }
}

nav-bar.ts

   constructor(public loginService:LoginService  ){}
     this.loginService.login().subscribe(
          res=> {
            this.loaddata(res)
            }, err => {
           console.log(err);
            });
    loaddata(un){
    console.log(un);
  this.username = un;
    }

nav-bar.html

 <ul class="nav navbar-nav">
    <li ><h4 style="display:inline-block">Welcome ,</h4><b>{{username}}</b></li>
    <li *ngIf="!isLoggedIn"><a (click)="logout()">Log out</a></li>
 </ul>

Answer 3

Modify the service and store current user:

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

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

Include the LoginService in the provider app.module.ts

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

Now you can use currentUser variable of LoginService inside nav-bar component

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

The advantage of this approach:

• Can use login detail at multiple pages.
• Dynamic update when login detail change
• Separation of login logic shared across the app
• broadcasting is not the preferable approach as it broadcast the data, any module can subscribe it and use it.

I hope this will help you. Happy coding