Angular 4 ngOninit not invoke when routing from on component to another component using Facebook login api

1,147 views
Skip to first unread message

Prabakaran V

unread,
Oct 3, 2017, 7:37:23 AM10/3/17
to Angular and AngularJS discussion

I am using angular 4. when routing from one component to another component ngOninit not invoking. i have tried different methos but no use.

Here is my code: 

app-router.module.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { GetStartedComponent } from './auth/get-started/get-started.component';
    import { FbregisterComponent } from './auth/fbregister/fbregister.component';
    
    
    const routes: Routes = [ 
      { path: 'GetStarted', component: GetStartedComponent, pathMatch: 'full' },
      { path: 'Fbregister', component: FbregisterComponent, pathMatch: 'full'}
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }


getstarted.component.ts:
Here i am using facebook api 

    onfacebooklogin(httpobj,navobj,navthis){
        FB.Event.subscribe('auth.statusChange', (response => {
            if (response.status === 'connected') {
                FB.login(function () {          
                let accessToken = response.authResponse.accessToken;
                FB.api('/me', 'get', { access_token: accessToken, fields: 'id,name,gender,email,first_name,last_name' }, function(response) {              
                    sessionStorage.setItem('fbAccessToken',accessToken);
                    if (true) {
    
                        console.log('You are now logged in.');
                        AWS.config.update({
                            region: CognitoUtil._REGION,
                            credentials: new AWS.CognitoIdentityCredentials({
                                IdentityPoolId: CognitoUtil._IDENTITY_POOL_ID,
                                Logins: {
                                    'graph.facebook.com': accessToken,                                       
                                },                          
                            })     
                        });
                        console.log("accesstoken", accessToken);
                        navthis.zone.run(() => {
                            httpobj.get('/api.json' + response.id)
                            .map( res => {
                                if (res) {
                                    if (res.status === 200) {
                                        sessionStorage.setItem('faceBookLoginValid',accessToken);                              
                                        navobj.navigate(['/']);    // Here i am routing the component                            
                                    } 
                                }
                            }) 
                            .catch(() =>{                      
                                sessionStorage.setItem('FacebookDetails', JSON.stringify(response));                                                        
                                navobj.navigate(['/facebookRegistration']); // Here i am routing the component
                            })
                            .subscribe((data) => {},
                            err => {});  
                        });   
                    } else {
                        //console.log('There was a problem logging you in.');
                    }
    
                });
            });
            } else {
                console.log("not connected");
            }
    
        }));
      }


fbregister.component.ts:  

    import { Component, OnInit, NgZone } from '@angular/core';
    import { Http, Headers, Response, RequestOptions  } from "@angular/http";
    import { Router, ActivatedRoute, Params, ParamMap,  } from '@angular/router';    
  
    @Component({
      selector: 'app-fbregister',
      templateUrl: './fbregister.component.html',
      providers:[RegistrationFacebookUser1],
      styleUrls: ['./fbregister.component.css'],
    
    })
    export class FbregisterComponent implements OnInit {    
      public name1: string;
      public lname1: string;
      public email1: string;     
      constructor(public http:Http, private sharedService: SharedService, public registrationUser:RegistrationFacebookUser1, 
        public registrationService:RegistrationService, public router:Router, private zone:NgZone) {}
    
      public ngOnInit() {        
        console.log("test praba");
        var retrievedObject = sessionStorage.getItem('FacebookDetails');    
        var parsedObject = JSON.parse(retrievedObject);    
        console.log('tett',parsedObject);  
        this.email1 =  parsedObject.email; 
        this.name1 =  'test1111';        
        console.log('test',this.email1);  
       
      }
    
    }

HTML   

     {{name1}}<br>{{email1}}

While routing to this component ngOnint called i have tested using console but its not printed. but when i refresh the page it will load the ngOninit.

I am using sessionstorage to retrive datas. i need to display retrived datas to html while routing from one component to another component.


Original post stackoverflow link : https://stackoverflow.com/q/46462531/5028339

Prabakaran V

unread,
Oct 3, 2017, 7:37:23 AM10/3/17
to Angular and AngularJS discussion

I am using angular 4. when routing from one component to another component ngOninit not invoking. i have tried different methos but no use.

While routing to this component ngOnint called i have tested using console but its not printed. but when i refresh the page it will load the ngOninit.

I am using sessionstorage to retrive datas. i need to display retrived datas to html while routing from one component to another component.

Original code stackoverflow link here: https://stackoverflow.com/q/46462531/5028339

Soja C

unread,
Oct 3, 2017, 11:58:15 PM10/3/17
to ang...@googlegroups.com
That is you get the data from the session storage only after refreshing FbRegisterComponent's HTML page.On the first time page routes, but you do not get data from Session Storage.Am I correct?



--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages