Input variable in the router-exit component

Question

I wanted to know if you guys can now use a combination of @Input + ngOnChanges () or something similar inside the component.

Basically, I set the logged: boolean variable to my AppComponent, and in my template, I:

 <router-outlet></router-outlet> <login [logged]="logged"></login> 

What I want is to see that the variable is logged inside the component in the socket router, so I only do this here when the registered value is true.

I tried putting <router-outlet [logged]="logged"></router-outlet> , but this will not work, and using the variable in the service does not seem to match the ngOnChanges () chat.

Does anyone have an idea? Thanks!

Answer 1

Create a service that has the ability to monitor your subscription to

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import { ReplaySubject } from 'rxjs/ReplaySubject'; @Injectable() export class UserSessionService { private _loggedIn: ReplaySubject<boolean> = new ReplaySubject<boolean>(); public logUserIn() { this._loggedIn.next( true ); } public logUserOut() { this._loggedIn.next( false ); } public getUserLoggedInObs(): Observable<boolean> { return this._loggedIn.asObservable(); } } 

Add the service to the parent module (be careful when adding it to several modules, since you can get different instances of this service with different loggedIn values)

 import { NgModule } from '@angular/core'; import { UserSessionService } from 'wherever/service/is/located'; @NgModule({ providers: [ UserSessionService ] }) export class AppModule { } 

In your controller do something like

 public userLoggedInObs: Observable<boolean>; constructor( private userSessionService: UserSessionService ) { this.userLoggedInObs = userSessionService.getUserLoggedInObs() } 

In your view you can add

 <div *ngIf="userLoggedInObs | async"> User is logged in </div> <div *ngIf="!(userLoggedInObs | async)"> User isn't logged in </div> 

When you call a service, it will be broadcast to all components that are currently subscribing to it, and then it will be updated.

Answer 2

The easiest way, I would say, is to use the service and add this service to your child.

 @Injectable() export class LoginService { private logged:boolean; setlogged(data:boolean) { this.logged = data; } isLogged() { return this.logged; } 

OR use localstorage

  set isLogged(value: boolean) { localStorage.setItem('logged', value); } get isLogged(): boolean { return <boolean> localStorage.getItem('logged')); } } 

In your component:

 constructor(private loginService:LoginService) {} logged: boolean; ngOnInit() { this.logged = true; // variable: this.loginService.setLogged(logged); // Localstorage: localStorage.setItem('logged', logged); } 

In the child component:

 logged: boolean; constructor(loginService:LoginService) { // variable: this.logged = this.loginService.isLogged(); // Localstorage: this.logged = this.loginService.isLogged; }