0

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

我有一个基于 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, canActivate: [AuthGuard],
    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 而不是用户（对象）本身（我有其他对象的其他解析器（返回对象的地方，这按预期工作。

一旦功能按预期工作，人员和用户的命名将受到重构。

任何帮助表示赞赏，并提前非常感谢，

爱德华

4

1 回答 1

0

您可能必须从而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); 
  }
}
于 2020-10-31T21:25:28.330 回答