angular2 라우터 탐색 구성 요소를로드하지 않습니다 제대로 그것에 대해

Question

내 코드는 아래와 같습니다 :

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']); 
       } 

      }); 
     }); 
} 

을 즉시 나는이 코드를 실행, 그것은 집 (현재의) 경로를로드하고 배경 로그인에서 (과거) 두 경로 다. 아래와 같이 이상한 같습니다

앱 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

0 내가 googleClick() 안에 모든 것을 제거하고이 잘 작동에만 this.router.navigate(['/home']); 유지하는 경우 내가 발견 한

@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']); 
      } 

    }); 
}); 

    } 

} 

한 가지입니다. 당신의 googleClick() 방법에

Answer 1

는 다음을 수행하십시오

• 를 주입 NgZone NgZone run 방법으로 구성 요소
• 랩 라인 this.router.navigate(['/home']);에

그것은 것 같은 :

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

github의 issue을 기반으로 한 workaroung입니다.