Question

我正在使用角度4.当从一个组件路由到另一个组件时ngOninit没有调用。我尝试了不同的方法，但没有用。

这是我的代码：

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：我在这里使用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}}

虽然路由到此组件，但名为i的ngOnint已使用控制台进行了测试但未打印。但是当我刷新页面时，它将加载ngOninit。

我使用sessionstorage来检索数据。我需要在从一个组件路由到另一个组件的同时向html显示重新获取的数据。

Answer 1

根据您显示的代码，您根本没有导航，这就是OnInit未执行的原因。

navobj.navigate(['/']);    // Here i am routing the component

您尝试导航到＆＃34; /＆＃34;在这里，但你根本没有定义这条路线。所以路由器什么都不做，根本没有导航。尝试在那里明确导航到你的Facebook路线。

使用Facebook登录API从组件路由到另一个组件时，不会调用Angular 4 ngOninit

1 个答案: