Angular2アプリがブラウザの更新時に正しく初期化されない

Question

最初のAngular2アプリを開発しているときに、ブラウザでアプリを更新するときに問題が発生します。

アプリを使用するには、認証が必要です。 私はこれを扱うauthenticationServiceを持っていて、ユーザーがログインしているときは、この認証サービスにデータが取り込まれて格納されます。

アプリに2人のガード、CanActivateとResolveガードがあります。

Guardを解決するには、ユーザーデータがauthenticationServiceに存在する場合はtrueを返します。 アプリがログインページに移動していないか、エラーが発生した場合は、ログインページに移動します。

私はuserIdを使ってdataServiceのinit呼び出しメソッドでdataComponentを持っています。 userIdはuserDataのauthenticationServiceから読み込まれます。

以下のシナリオクラッシュアプ​​リ。 ユーザーがログに記録され、すべて正常に動作します。

ブラウザがリフレッシュされると、dataComponentはauthenticationServiceがユーザーデータを取得する前に初期化されます。 そのため、間違ったuserIdがdataServiceとappクラッシュに送信されます。

これは解決ガードをアクティブにしても発生します。 ガードを解決する前にDataComponentが初期化されます。そして、OnInit DataComponentは間違ったuserIdを持つdataServiceメソッドを呼び出します。そしてまた、アプリクラッシュ。

質問：

解決ガードは、右、データが存在する前にルートをロードしないために使用すべきですか？ その後、ガードが応答する前にコンポーネントが初期化されている理由を教えてください。

この問題を解決するにはいくつかの提案がありますか？

解決策： ソリューションは答えられた質問から来ています。ここでコードがどのように見えるか。

リゾルバガード：

resolve(): Observable<UserData> { 
    return this.authenticationService.getUserData(); 

ルーティング：

{ path: 'admin/dashboard', component: DashboardComponent, resolve: {user: ResolverGuard} }, 

ダッシュボード：

ngOnInit(): void { 
    this.activatedRoute.data.subscribe((data:{user:UserData}) => { 
     if (data.user) { 
      this.dashboardService.getDashboard(data.user.id) 
       .subscribe(dashboard => { this.dashboard = dashboard }, err => console.log(err)); 
     } 
    }); 
} 

Answer 1

リゾルバはガードが、コンポーネントのデータをロードする方法ではありません、あなたがする必要がありますコンポーネント内のこの解決済みのデータにアクセスします。

// routing 
    { 
    path: 'myroute', 
    component: MyComponent, 
    resolve: {user: MyResolver} 
    } 

// component constructor 
constructor(... 
      private activatedRoute: ActivatedRoute) {} 

    // ngOnInit 
this.activatedRoute.data 
    .subscribe((data: {user}) => { 
    // do stuff 
    });