2017-12-29 48 views
0

私のアプリケーションでは、アプリケーション全体で共通のデータがいくつかあります。 しかし、ビューが読み込まれた後にデータが移入されます。 たとえば、ユーザー設定、プロファイルなどのデータ。 ビューが読み込まれる前にデータの読み込みにresolveを使用できますが、すべてのルートに解決を追加できません。 特定のルートを更新すると、データが利用できないか、ビューの読み込み後にサーバーからの応答が返されます。データが角度4で設定された後のルートのロード

どうすればいいですか?

以下は、私が達成しようとしているサンプルコードです。 in App.Component.ts トークンが存在する場合は、要求されたページにリダイレクトし、そうでない場合はログインにリダイレクトします。

if (token) 
{ 
    this.commonServ.loadAppData(); 
    this._router.navigate([(path == 'login' || path == '') ? 'test' : path]);      
} 
else 
    this._router.navigate(['login']); 

ロードデータメソッドは、いくつかのAPIにヒットし、データをモデルにロードします。例えば

public loadAppData() { 

     this.getUserSettings().then(settings => { 
      if (settings) { 
       //Do Something 
      } 
     }, error => { 

      }); 



     this.setUserProfile().then(settings => { 
      //Do something 

     }); 

    } 

ビューがロードされた後setUserProfileからデータが来ます。 これはどのように行うことができますか?

ありがとうございます!

答えて

0

他のコンポーネントの前にロードされた「シェル」コンポーネントを定義し、リゾルバを追加します。

アプリケーションテンプレート

<router-outlet></router-outlet> 

シェルコンポーネントテンプレート

<pm-menu></pm-menu> 

<div class='container'> 
    <router-outlet></router-outlet> 
</div> 

のAppルーティングモジュール

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
      { 
       path: '', 
       component: ShellComponent, 
       resolve: { data: DataResolver }. // <--- HERE 
       children: [ 
        { path: 'welcome', component: WelcomeComponent }, 
        { 
         path: 'products', 
         canActivate: [AuthGuard], 
         loadChildren: './products/product.module#ProductModule' 
        }, 
        { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
       ] 
      }, 
      { path: '**', component: PageNotFoundComponent } 
     ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 
+0

私は彼女を作成しました私は気づいてルーティングすることができません。私のアプリには異なるモジュールがあり、各モジュールには独自のルーティングファイルもあります。アプリのルーティングには以下のルートがあります const appRoutes: [パス: '**'、コンポーネント:PageNotFoundComponent}、 ]; {パス: ''、リダイレクト先: '/ログイン'、パスマッチ: 'フル'}、 –

+0

上記の例は、 'loadChildren'を使って製品がどのようにロードされるかを示しています。ここで完全な例を見ることができます:https://github.com/DeborahK/Angular-Communication – DeborahK

関連する問題