Angular 2 Resolve 只工作一次

Question

我正在尝试做一个简单的 Resolve returns 用户。但是，在我的应用程序中，我需要用我自己的 class 包装 http 组件，其中 returns 是一个可观察的主题。 我的 Resolver 在第一个用户 link 上按预期工作，但是在 Resolve 之后单击 UserProfileComponent 中的任何用户 link 时，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);

用户解析：

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

API服务：

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 服务器 returns 是一个具有 "data" 属性的 JSON 结构，因此 ['data'].

此组件中的 ngOnInit 未在除第一个以外的任何路线导航上到达，这使我相信 Resolver Observable 永远不会完成。

Answer 1

也许问题在于您如何访问已解析的数据。

当 URL 更改时，您的组件不是 re-initialized，这就是为什么如果您想根据 URL 参数在组件本身内加载数据，您应该订阅路由参数更改.

因此，当您访问已解析的数据时，您可能还应该考虑它可以在没有 re-initialization 组件的情况下发生变化。

编辑： 从 UserProfileComponent 代码可以看出我的假设很可能是正确的。尝试通过订阅读取已解析的数据：

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

Angular 2 Resolve 只工作一次

Angular 2 Resolve only works once

angular

rxjs

observable

resolve

resolver