Angular2 支持 HATEOAS答案

【问题标题】：Angular2 support with HATEOASAngular2 支持 HATEOAS
【发布时间】：2017-02-03 10:31:24
【问题描述】：

在 HATEOAS 链接的支持下，我有一个安静的网络服务。当我打电话 "http://localhost:8080/v1/bookings/1225380?lock=true" 链接我得到了以下资源 URL。我想将这些超媒体与我的 Angular2 应用程序（最近升级到最终版本）集成。我发现在 Angular HAL 的支持下使用 Angular1 实现的资源很少（链接 - https://paulcwarren.wordpress.com/2015/04/03/role-based-spas-with-angularjs-and-spring-hateoas/，https://github.com/LuvDaSun/angular-hal/tree/master/src）。但我找不到 Angular2 的资源。

"links": [
  {
    "rel": "client",
    "href": "http://localhost:8080/v1/clients/10000"
  },
  {
    "rel": "passengers",
    "href": "http://localhost:8080/v1/bookings/1225380/passengers"
  },
  {
    "rel": "itinerary",
    "href": "http://localhost:8080/v1/bookings/1225380/itinerary"
  },
  {
    "rel": "self",
    "href": "http://localhost:8080/v1/bookings/1225380?lock=true"
  },
  {
    "rel": "clientBookingHistory",
    "href": "http://localhost:8080/v1/bookings/1225380/clientBookingHistory/10000"
  }
]

【问题讨论】：

标签： angular hateoas

【解决方案1】：

您可以为此创建一个 Injectable 并使用此类而不是 angular http 类。在这里您过滤链接，然后使用正确的链接调用 http。

@Injectable() 
export class Hypermedia {

   constructor(private http: Http) { }

   get(links: any[], rel: String, body?: any, options?: RequestOptionsArgs): Observable<Response> {
    var link = null;
    var request = null;

    // Find the right link
    links.forEach(function (_link) {
        if (_link.rel === rel) {
            link = _link
            return;
        }
    });

    return this.http.get(link.href);
}

}

提供这个注入器并将它添加到你需要它的构造函数中

constructor(private hypermedia:Hypermedia)

然后你可以像平常调用 http 类一样简单地调用它

this.hypermedia.get(myHypermediaLinksArray,myRel)

希望这会有所帮助:)

【讨论】：