0

In my Angular 2 project I want event communication between sibling component and I have read some articles ans follow some question on stackoverflow on this topic and now finally I am using SERVICES EMITTING EVENTS USING RXJS as mentioned in this answer which is good solution.

But I have following situation. This is my AppComponent html.

<section class="app content-area">
  <fds-header></fds-header>
  <router-outlet></router-outlet>
</section>

I have three component AuthComponent, HomeComponent and HeaderComponent. First two component is rendering in outlet and last component has its own element/selector fds-header. So whatever component is rendered in outlet is sibling of HeaderComponent. In HeaderComponent there is a logout button and logout functionality is in AuthComponent. I am emitting event from HeaderComponent and catch in in AuthComponent. The problem is when user successfully login then he is redirected to HomeComponent and on HomeComponent when I refresh the page application is re-initialized and this time AuthComponent is not created so logout does not work because there is only one subscriber in AuthComponent which is not available. So my question is how can I handled this scenario?

Community
  • 1
  • 1
Shams Tabraiz Alam
  • 111
  • 1
  • 2
  • 12

1 Answers1

1

While sign-in requires a component, you can achieve sign-out using a service call without the need for a component.

In such a scenario the subscriber will not be the AuthComponent but a AuthService which at the end of sign-out navigate you to login page again.

Chandermani
  • 42,177
  • 11
  • 82
  • 86