angularjs - Angular2 : How to communicate from parent component to child? -
i'm loading of div in between tag. bellow.
here index.html
<html> <script> system.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. display application --> <body> <my-app>loading...</my-app> </body> </html> app.module.ts
@ngmodule({ imports: [ browsermodule, formsmodule, approutingmodule ], declarations: [ appcomponent, logincomponent, homecomponent, newsfeedcomponent, topbarcomponent, sidemenucomponent ], providers : [ authgaurd ], bootstrap: [ appcomponent ] }) export class appcomponent {} home.component.ts
@component({ selector: 'home', moduleid: module.id, templateurl: 'home.component.html', providers : [ loginservice ] }) export class homecomponent implements oninit{ isloggedin : boolean; constructor (private loginservice : loginservice) { } ngoninit(): void { this.loginservice.getlogged().subscribe((isloggedin: boolean) => { this.isloggedin = isloggedin; }); } } home.component.html <side-menu *ngif='isloggedin'></side-menu> <top-bar *ngif='isloggedin'></top-bar> <router-outlet></router-outlet> auth.gaurd.ts
@injectable() export class authgaurd implements canactivate{ constructor(private router : router) { } canactivate(){ if (localstorage.getitem('islogin')){ return true; } this.router.navigate(['/login']) return false; } } login.service.ts
@injectable() export class loginservice { private subject: subject<boolean> = new subject<boolean>(); constructor(private router : router) { } login(){ this.setlogged(true); localstorage.setitem("islogin","true"); this.router.navigate(['/news-feed']); } logout(){ this.setlogged(false); localstorage.removeitem("islogin"); this.router.navigate(['/login']); } getlogged(): observable<boolean> { return this.subject.asobservable(); } setlogged(val : boolean): void { this.subject.next(val); } } login.component.ts
@component({ selector: 'login', moduleid: module.id, templateurl: 'login.component.html' }) export class logincomponent { constructor (private loginservice : loginservice) { } login(){ this.loginservice.login() } } login.component.html
<input type="number” #mobilenumber /> <input type="password" #password /> <input type="button" (click)="login()"> newsfeed.component.ts
@component({ selector: 'newsfeed', moduleid: module.id, templateurl: 'newsfeed.component.html', }) export class newsfeedcomponent { } newsfeed.component.html
some html text....!!!!
app-routing.module.ts
@ngmodule({ imports: [ routermodule.forroot([ { path : 'login', component : logincomponent }, { path : 'news-feed', component : newsfeedcomponent, canactivate : [authgaurd] }, { path : '', redirectto : '/news-feed', pathmatch : 'full' } { path: '**', component: logincomponent } ]) ], exports: [ routermodule ] }) export class approutingmodule {} actually it's working fine when i'm going clicks. launching perfect on click of login button forwards newsfeed , shows expected result. when i'm going browser url, not loading side bar , top bar component home.html
i'm not sure if fixes think want read value localstorage first stored status , if use behaviorsubject listeners last status if this.subject.emit() called before subscriber subscribing.
@injectable() export class loginservice { //private subject: subject<boolean> = new subject<boolean>(false); private subject: behaviorsubject<boolean> = new behaviorsubject<boolean>(); // <<< changed constructor(private router : router) { this.sublect.next(logalstorage.getitem('islogin')); // <<< added } login(){ this.setlogged(true); localstorage.setitem("islogin","true"); this.router.navigate(['/news-feed']); } logout(){ this.setlogged(false); localstorage.removeitem("islogin"); this.router.navigate(['/login']); } getlogged(): observable<boolean> { return this.subject.asobservable(); } setlogged(val : boolean): void { this.subject.next(val); } }
Comments
Post a Comment