Angular 2 Resolve只能工作一次

Question

我想做一個簡單的解決方案，返回用戶。然而，在我的應用程序中，我需要用自己的類來包裝http組件，它返回一個Subject爲可觀察的。 我的Resolver按照預期在第一個用戶鏈接上工作，但在Resolve之後單擊UserProfileComponent中的任何用戶鏈接時，Resolve從不會完成第二次。我可以看到使用新ID更改的瀏覽器URL以及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」 方法：

... 
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：

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); 

... 

請注意，我的API服務器 「數據」 屬性返回一個JSON結構，因此['data']。

在此組件的ngOnInit是不任何路線導航，除了第一，這使我相信，解析器可觀察到從未完成爲止。

Answer 1

也許問題在於你如何訪問解析數據。

當URL改變時，你的組件不會被重新初始化，這就是爲什麼如果你想根據URL參數在組件本身中加載數據，你應該訂閱路由參數的改變。

因此，當您訪問已解析的數據時，您應該也可以考慮在不重新初始化組件的情況下更改它。

編輯：從UserProfileComponent代碼它是可見的，我的假設是最有可能是正確的。嘗試閱讀已訂閱的解析數據：

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