Angular Resolver似乎不更新对象

问题描述

晚上好，我需要第二只眼睛，我找不到问题。

我有一个基于Java（Dropwizard）的REST服务，它公开了以下服务。

@GET
@Path("{personId}")
public Response getPerson(@PathParam("personId") OptionalLong personId)

前端的对应功能是

  getUserById(userId: number): Observable<User> {
console.log("fetching user for id " + userId);
return this.http.get<User>(this.baseUrl + `/api/authorization/persons/${userId}`,{observe: 'response'}).pipe(
    map(r => {
      let resp = r as HttpResponse<User>;
      console.log("returning resp " + resp.body.name);
      return resp.body;
    })
  );

}

上述功能由解析器调用

import {Injectable} from "@angular/core";
import {ActivatedRouteSnapshot,Resolve,RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";
import {ApiService} from "./api.service";
import {User} from "../model/user.model";

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

  constructor(private apiService:ApiService) {

  }

  resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<User> {
    return this.apiService.getUserById(route.params['userid']);
  }

}

路由配置如下：

{ path: 'users',component: UsersComponent,canActivate: [AuthGuard],children: [
    { path: 'profile/:userid',component: UserProfileComponent,resolve:
      {
        user:UserResolver
      }
  },{ path: '',component: ListUserComponent }

] }

UserProfileComponent看起来像这样

import { Component,Input,OnInit} from '@angular/core';
import {ActivatedRoute,Router} from "@angular/router";
import {ApiService} from "../../../core/api.service";
import {AuthenticationService} from "../../../services/authentication.service";
import {AlertService} from "../../../services/alert.service";
import {User} from "../../../model/user.model";

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

  constructor(private router: Router,private route: ActivatedRoute,private apiService: ApiService,private authenticationService: AuthenticationService,private alertService: AlertService) { }

  ngOnInit() {
    
    if(!this.authenticationService.currentUserValue) {
      this.router.navigate(['login']);
      return;
    }
    console.log("In UserProfileComponent " + this.user); 
  }
}

我可以看到已经执行了对后端的调用，通过api找到了一个用户并接收了该用户，但是，UserProfileComponent中的实例似乎没有更新，并且无法从HTML模板访问数据

我认为是某种原因，因为后端提供的是HTTPResponse而不是用户（对象）本身（我还有其他对象的解析器（返回对象时，它按预期工作。

功能正常运行后，人员和用户的命名将受到重构。

感谢您的帮助，在此先感谢

爱德华

解决方法

您可能必须从ActivatedRoute获得解析器数据，而不要使用@Input。尝试以下

export class UserProfileComponent implements OnInit {
  user: User;

  constructor(
    private router: Router,private route: ActivatedRoute,...
  ) { }

  ngOnInit() {
    if(!this.authenticationService.currentUserValue) {
      this.router.navigate(['login']);
      return;
    }
    this.user = this.route.data.user;
    console.log("In UserProfileComponent " + this.user); 
  }
}