从没有视图的组件中触发自定义事件

Question

I am looking to be able to fire a custom event that other components can subscribe to, what i've read isn't really what i want, i don't want any view or user interaction on a html element to fire my event.

If i have a component with a logout method:

logout() : void {
    // change local storage state

    // fire event so other components can update
}

I want this method to fire a custom event that other components can subscribe to so they know to react to the logout.

So another component might have a method:

something() : void{

    // subscribe the event here and perform some local action, like changing a login state variable
}

I'm sure i have done this before when i was using Ionic instead of pure angular...

Answer 1

I believe the best approach for this pattern in Angular would be to expose an Observable with a service. Something like (say, in AuthenticationService):

private loginStatusSource$ = new BehaviorSubject();

public loginStatus$ = this.loginStatusSource$.asObservable();

...

logout() : void {
    // change local storage state

   this.loginStatusSource$.next(false);
}

getLoginStatus(): Observable<boolean> {
  return this.loginStatus$;
}

then in your component:

public loginStatus$: Observable<boolean>;

constructor(private authService: AuthenticationService) {
  this.loginStatus$ = this.authService.getLoginStatus();
}

something() : void{
  this.loginStatus$.subscribe(status => {
    // perform some local action...
  });
}

Note that this is a simplified exemple, you might want to store more than just a boolean, like your user data and stuff like that. State management tools like NGRX or Akita could be used, but this is the simpler, no additional dependencies required, approach I use.