navigation routeur angular2 ne composant charge pas correctement

Question

Mon code pour c'est comme indiqué ci-dessous:

googleClick(): void { 
    this._auth.login('google').subscribe(
     (data: any) => { 
      console.log('google server data ' + JSON.stringify(data)); 
      this.loginService.registerUser(data.email, data.name, '0').subscribe(res => { 
       if (res.status === '200') { 
        this.storage.store('user_token', res.data.user_token); 
        this.storage.store('user_email', data.email); 
        this.storage.store('user_img', data.image); 
        this.storage.store('user_first_name', res.data.user_name); 
        this.storage.store('user_id', res.data._id); 
        this.storage.store('user_paltform_login', 0); 
        this.router.navigate(['/home']); 
       } 

      }); 
     }); 
} 

Dès que j'exécute ce code, il charge la route de la maison (en cours) et dans la connexion d'arrière-plan (passé) route les deux. Il fait un peu bizarre comme indiqué ci-dessous:

app-routing.module.ts

const routes: Routes = [ 
    {path: '', redirectTo: '/login', pathMatch: 'full' }, 
    {path : 'home', component : HomeComponent }, 
    {path : 'login', component : LoginComponent}, 
    {path : 'foodtrucks', component : FoodComponent}, 
    {path : ':user_name/order-history', component : OrderHistoryComponent}, 
    {path : 'cart' , component : CartComponent}, 
    {path : 'payment', component : PaymentComponent}, 
    {path : ':order_id/order-details', component : OrderDetailsComponent}, 
    {path : 'food-info', component : FoodInfoComponent}, 
    {path : 'thank-you', component : ThankYouComponent} 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

app.component.ts

@Component({ 
    selector: 'my-app', 
    template: '<router-outlet></router-outlet>', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
} 

home.component.ts

@Component({ 
    selector: 'my-home', 
    templateUrl : '../../template/home.html', 
    styleUrls : ['../../css/home.css'] 
}) 


export class HomeComponent implements OnInit { 
    food: any= []; 
    itemList: any = []; 
    user_name: any; 
    user_email: any; 
    user_image: any; 
    myStyle: any = { 
     width: '0px' 
    }; 

    constructor(private router: Router, private _homeService: HomeService, 
    private _storage: LocalStorageService, private winRef: WindowRef) { 
     console.log('Window object', winRef.nativeWindow); 
     // winRef.nativeWindow.alert('it is loaded'); 
    } 

    ngOnInit(): void { 
     this.user_name = this._storage.retrieve('user_first_name'); 
     this.user_email = this._storage.retrieve('user_email'); 
     this.user_image = this._storage.retrieve('user_img'); 
     this._homeService.getPopularItmes().subscribe(res => { 
     if (res.status === '200') { 
      let food = res.data; 
      for (let value of food) { 
       for (let item of value.item_list){ 
        this.itemList.push(item); 
       } 
      } 
     } 
    }); 
} 


    openNav(): void { 
     console.log('open nav clicked'); 
     this.myStyle.width = '230px'; 
    }; 

    closeNav(): void { 
     this.myStyle.width = '0px'; 
    }; 

    tabClicked(): void { 
     this.router.navigate(['/foodtrucks']); 
    }; 

    loadCart(): void { 
     this.router.navigate(['/cart']); 
    }; 
} 

login.component.ts

@Component({ 
    selector : 'my-login', 
    templateUrl : '../../template/login.html', 
    styleUrls : ['../../css/login.css'] 
}) 

export class LoginComponent { 

    constructor(private router: Router, public _auth: AuthService, 
     private storage: LocalStorageService, private loginService: LoginService) { 
    } 

    FBLogin(): void { 
     this._auth.login('facebook').subscribe(
      (data: any) => { 
       console.log(data); 
      } 
     ); 
     // this.router.navigate(['/home']); 
    } 

    googleClick(): void { 
     this._auth.login('google').subscribe(
      (data: any) => { 
       console.log('google server data ' + JSON.stringify(data)); 
       this.loginService.registerUser(data.email, data.name, '0').subscribe(res => { 
       if (res.status === '200') { 
        this.storage.store('user_token', res.data.user_token); 
        this.storage.store('user_email', data.email); 
        this.storage.store('user_img', data.image); 
        this.storage.store('user_first_name', res.data.user_name); 
        this.storage.store('user_id', res.data._id); 
        this.storage.store('user_paltform_login', 0); 
        this.router.navigate(['/home']); 
      } 

    }); 
}); 

    } 

} 

Une chose que je l'ai remarqué est si je retire tout à l'intérieur googleClick() et ne garder que this.router.navigate(['/home']); alors cela fonctionne très bien.

Answer 1

Sur votre méthode googleClick() effectuer les opérations suivantes:

• Injecter NgZone dans votre composant
• Wrap la ligne this.router.navigate(['/home']); en méthode NgZone run

Ce sera comme:

this.ngZone.run(() => this.router.navigate(['/home']))

C'est un workaroung basé sur ce issue sur github.