Angular4アプリケーションページの更新により空白の画面になる

Question

角度4.4.0バージョンWebアプリケーション（ホームページ）canActive（）メソッドがfalseを返すと、ページの更新により空白の画面が表示されます。 （URLを取得する：localhost：4200 /＃/）

この場合、アプリケーションはデフォルトで[ランディングページ]（ログインページ）に移動する必要があります。しかし、この特定のケースでは起こっていません。ナビゲーションのキャンセルは空白の画面になり、再びリフレッシュするときに機能します。

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { ModuleWithProviders } from '@angular/core'; 

export const routes: Routes = [ 
    { path: '', redirectTo: 'pages', pathMatch: 'full' }, 
    { path: '**', redirectTo: 'pages/landingpage' } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true }); 

pages.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { Pages } from './pages.component'; 
import { ModuleWithProviders } from '@angular/core'; 
import { landingPage } from './landingPage/landingPage.component' 
import { SignOutService } from '../providers/navlifecycleservices/signout-navservice'; 
import { SecurityService } from '../providers/security-service/security-service'; 
import { UserService } from '../providers/user-service/user-service'; 

export const routes: Routes = [ 
{ 
    path: 'landingpage', 
    loadChildren: 'app/pages/landingPage/landingPage.module#landingModule'  
}, 
{ 
    path: 'signout',  
    loadChildren: 'app/pages/landingPage/landingPage.module#landingModule', 
    canActivate: [SignOutService], 
}, 

{ 
    path: 'mobile', 
    loadChildren: 'app/pages/mobileEnter/mobileEnter.module#mobileModule', 
    canActivate: [SecurityService] 
}, 
{ 
    path: 'custid', 
    loadChildren: 'app/pages/CustomerID/CustomerID.module#CustomerID', 
    canActivate: [SecurityService] 
} 
{ path: '', redirectTo: 'landingpage', pathMatch: 'full' }, 
{ 
    path: 'pages', 
    component: Pages, 
    children: [ 
    { path: 'home', loadChildren: 'app/pages/home/home.module#homeModule', canActivate: [UserService] }, 
    { path: 'accounts', loadChildren: 'app/pages/accountsPage/accountsPage.module#accountsModule', canActivate: [UserService] } 

    ] 
}, 

]; 

export const routing: ModuleWithProviders = RouterModule.forChild(routes); 

canActiveMethod：

canActive(){ 
    if(this.securityService.isUserLoggedIn() && this.userData.getTokenData()){ 
     return true; 
    }else{ 
     // this.router.navigate(["/landingpage"]); 
     return false; 
    } 
} 

Answer 1

1.canActiveの方法の中で、不正なルートをログインページに移動する必要があります。

2.このナビゲーションは直接動作しません。setTimeoutで囲む必要があります。

canActive(){ 
    if(this.securityService.isUserLoggedIn() && this.userData.getTokenData()){ 
     return true; 
    }else{ 
     setTimeout(()=> { 
      this.router.navigate(["/landingpage"]); 
     }, 150); 
     return false; 
    } 
}