如何在 Angular 中使用嵌套的休息资源？答案

【问题标题】：How to consume nested rest resource in Angular?如何在 Angular 中使用嵌套的休息资源？
【发布时间】：2018-06-29 00:34:18
【问题描述】：

我正在使用 Angular 5 来做 Web UI。此 Web UI 在使用 Java 和 Spring data rest 编写的后端服务中使用 restful 端点。这是端点，如：

http://localhost:8080/

{
  "_links" : {
    "accounts" : {
      "href" : "http://localhost:8080/accounts{?page,size,sort}",
      "templated" : true
    },
    "build-and-test-submissions" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "build-submissions" : {
      "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile"
    }
  }
}

build-and-test-submissions 和 build-submissions 端点是该项目的主要关注点。

http://localhost:8080/build-and-test-submissions

    {
  "_embedded" : {
    "build-and-test-submissions" : [ {
      "changeListId" : "23967925",
      "postedAt" : null,
      "lastUpdatedAt" : null,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildAndTestSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/buildSubmission"
        },
        "account" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/account"
        }
      }
    },  ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/build-and-test-submissions"
    },
    "search" : {
      "href" : "http://localhost:8080/build-and-test-submissions/search"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 5,
    "totalPages" : 1,
    "number" : 0
  }
}

http://localhost:8080/build-submissions

   {
      "_embedded" : {
        "build-submissions" : [ {
          "nvBranchName" : "some_branch",
          "nvPackageName" : "some_package",
          "isBuildSubmitted" : false,
          "isBuildCompleted" : false,
          "isTestSubmitted" : false,
          "isTestCompleted" : false,
          "packageLocation" : "",
          "jobId" : -1,
          "_links" : {
            "self" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildAndTestSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1/buildAndTestSubmissionParent"
            }
          }
        }, ... ]
      },
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
          "templated" : true
        },
        "profile" : {
          "href" : "http://localhost:8080/profile/build-submissions"
        },
        "search" : {
          "href" : "http://localhost:8080/build-submissions/search"
        }
      },
      "page" : {
        "size" : 20,
        "totalElements" : 5,
        "totalPages" : 1,
        "number" : 0
      }
    }

构建和提交和构建提交是 1:1 的关系。我的问题是：

大多数角度教程展示了如何使用 httpclient 来获取一个简单的非嵌套对象，使用如下示例：

this.http.get('http://localhost:9000/build-and-test-submissions')
            .subscribe((response: any) => {
              let buildAndTests: any[] = response;



                this.products = response;
                this.onProductsChanged.next(this.products);
                resolve(response);
            }, reject);
    });

但是我如何为有关系的对象做 http get 呢？例如。我应该嵌套一个构建和测试提交对象和一个构建提交对象的 http get 吗？

【问题讨论】：

标签： angular rest spring-boot spring-data-jpa httpclient

【解决方案1】：

首先我会做一个 console.log(buildAndTests) 来查看结构

this.http.get('http://localhost:9000/build-and-test-submissions')
        .subscribe((response: any) => {
          let buildAndTests: any[] = response;

           console.log( buildAndTests );
           console.log( buildAndTests._links.self.href );


            this.products = response;
            this.onProductsChanged.next(this.products);
            resolve(response);
        }, reject);
});

然后你可以开始尝试，直到你得到你需要的东西，例如，如果你评估

buildAndTests._links.self.href 应该返回“http://localhost:8080/build-and-test-submissions/1”

【讨论】：