角2解決は一度しか動作しません

Question

私はユーザーを返す簡単な解決をしようとしています。しかし、私のアプリケーションでは、自分自身のクラスでhttpコンポーネントをラップする必要があります。これは、Subjectを観測可能なものとして返します。 My Resolverは最初のユーザーリンクでは正常に動作しますが、Resolve後にUserProfileComponent内のユーザーリンクをクリックすると、Resolveがもう一度完了することはありません。ブラウザのURLが新しいIDで変更され、UserResolveのconsole.logが表示されますが、何も起こりません。

マイルータ：

import { Routes, RouterModule } from '@angular/router'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { UserProfileComponent } from './user-profile/user-profile.component'; 
import { LoginComponent } from './login/login.component'; 
import { AuthGuard } from './_resolve/guard.auth'; 
import { UserResolve } from './_resolve/user.resolve'; 

const appRoutes: Routes = [ 
    { path: '', component: DashboardComponent, canActivate: [AuthGuard] }, 
    { path: 'user/:id', component: UserProfileComponent, canActivate: [AuthGuard], resolve: { user: UserResolve } }, 
    { path: 'login', component: LoginComponent }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const Routing = RouterModule.forRoot(appRoutes); 

UserResolve：

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; 
import { ApiService } from '../_services/api.service'; 
import { Observable } from 'rxjs'; 

import { User } from '../_models/user'; 

@Injectable() 
export class UserResolve implements Resolve<User> { 

    constructor(private apiService:ApiService) {} 

    resolve(route: ActivatedRouteSnapshot):Observable<User> { 
    console.log('getting user ' + route.params['id'] + ' with resolver'); 
    return this.apiService.getUser(route.params['id']).first(); 
    } 
} 

ApiService：

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

import { RefreshHttpClient } from '../_injectables/refresh-http-client'; 
import { User } from '../_models/user'; 

@Injectable() 
export class ApiService { 

    constructor(private rfhttp:RefreshHttpClient) { } 

    getUser(userId):Observable<User> { 
    return this.rfhttp.get('/api/user?userId=' + userId); 
    } 

} 

そしてRefreshHttpClientは "取得" 方法：

... 
get(url):Observable<any> { 
    var sub = new Subject<any>(); 
    var obs = this.http.get(url, { 
    headers: this.createAuthorizationHeaders() 
    }) 
    .map(res => res.json()) 
    .subscribe(
    data => { 
     return sub.next(data); 
    }, 
    error => { 
     if (error.status == 401 || error.status == 403) { 
     this.refreshAndRetry(() => { 
      this.http.get(url, { 
      headers: this.createAuthorizationHeaders() 
      }) 
      .map(res => res.json()) 
      .subscribe(
      data => { 
       return sub.next(data); 
      }, 
      error => { 
       console.error(error); 
       return null; 
      }); 
     }); 
     } else { 
     console.error(error); 
     return null; 
     } 
    } 
); 

    return sub.asObservable(); 
} 
... 

編集：追加UserProfileComponent：私のAPIサーバは、 "データ" 属性を持つJSON構造体を返し

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

import { User } from '../_models/user'; 

@Component({ 
    selector: 'app-user-profile', 
    templateUrl: './user-profile.component.html', 
    styleUrls: ['./user-profile.component.scss'] 
}) 
export class UserProfileComponent implements OnInit { 

    abstract:Boolean; 
    user:User; 

    constructor(
    private route:ActivatedRoute 
) { } 

    ngOnInit() { 
    this.user = this.route.snapshot.data['user']['data']; 
    console.log(this.user); 

... 

注意、したがって['data']。

このコンポーネントでngOnInitはリゾルバ観測が終了されることはありませんと信じて私をリードしている、最初以外の任意の経路案内に達しではありません。

Answer 1

おそらく、解決されたデータへのアクセス方法に問題があります。

URLが変更された場合、コンポーネントは再初期化されません。そのため、URLパラメータに基づいてコンポーネント自体にデータをロードする必要がある場合は、パラメータの変更を登録する必要があります。

解決済みのデータにアクセスするときは、コンポーネントを再初期化せずに変更できると考えてください。

EDIT： UserProfileComponentコードから、私の前提が正しい可能性が高いことがわかります。サブスクリプション：

this.route.data.subscribe(d => this.user = d['user']['data']);