Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

角httpclient blob.

使用Angular的HttpClient“Blob”响应类型显示图像。

演示

httpclient blob映像的演示

源代码

您可以在Github上沿源代码下载并遵循或叉叉以下内容:

安装

首先,安装依赖项:

$NPM.安装

接下来,运行GULP任务,然后启动Node.js Express Server。

$ Gulp $chmod.+ x ./dist/bin/www $ ./dist/bin/www

然后,使用CLI服务Angular客户端:

$NPM.开始

目标

  1. 创建一个简单的Express Node.js HTTP服务器。
  2. 模拟图像/ JPEG REST API响应。
  3. 创建一个简单的角度应用程序来显示英雄。
  4. 查看英雄显示英雄的名称和相关图像。同样,由于我被攻击了这一部分,图像总是相同的。
  5. 展示如何使用该方法检索JPEG映像httpclient与之responseType.选项设置为“blob”。
  6. 显示图像。

服务器

让我们简要介绍节点.js服务器代码。该代码是用打字签名编写的,并编译为JavaScript,然后用Node.js执行。所有服务器代码都在root中/服务器目录。

图像存储在/服务器/公共/图像目录。现在,我有一个图像。而且,我将“黑客”响应始终返回相同的图像。

这里有一些代码片段/server/src/api /hero.ts.文件:

/ ** * @class herosapi * /出口Herosapi.{/ ** *创建API。* @静态的 */上市静态的创造路由器路由器{//删除代码路由器得到“/ heros /图像/:ID([0-9A-F] {24})”请求res.响应下一个下一步=>{Herosapi.GetMage.res.下一个;};}/ ** *获得英雄形象。* @param req {请求}快递请求对象。* @param res {response}快速响应对象。* @param下一个{nextfunction}下一个函数继续。* /上市GetMage.请求res.响应下一个下一步{//验证ID参数是否存在constparam_id.=“ID”;如果参数[param_id.]===.未定义{res.sendstatus.404.;下一个;返回;}//获得ID.constID=参数[param_id.];//获得英雄英雄FindByid.ID然后英雄=>{//验证英雄被发现如果英雄===.空值{res.sendstatus.404.;下一个;返回;}//总是返回美国船长//这不是你通常做的res.发送文件路径解决__dirname.“../ ....../public/images/captain-america.jpg”下一个;}抓住下一个;}}

要快速审查:

  • 我创造了一个Herosapi.课程将作为AT / API / HEROS的REST端点。
  • 有路由响应删除,获取,放置和发布请求。
  • GetImage()方法将使用该方法发送图像二进制数据发送文件()方法。请注意,这是我攻击此操作以始终返回相同的文件。可能的是,您的应用程序将根据请求数据重新返回图像(或文件Blob)。

客户

Angular客户端应用程序存储在根中/客户目录。我有一个单身英雄懒惰加载的模块。在Heros模块中,我们有两条路线:

  • /英雄
  • / heros / hero /:ID

此外,我有一个her那是位于/ client/src/app/core/services/heros.service.ts.这是用来的httpclient得到我们的英雄,并获得英雄形象。让我们来看看GetImage()方法:

上市GetMage.英雄英雄可观察到的<斑点>{返回这个httpclient得到`$ {这个URL.}/图片/$ {英雄_ID}`{responseType.“blob”};}

注意responseType.属性设置为“blob”。此外,还要注意该方法的返回类型是可观察的

接下来,让我们来看看非常简单的HTML模板Herocomponent.

<应用程序布局><H1.>{{(hero | sacync)?name}}H1.><IMG.#HeroImage./>应用程序布局>

注意#HeroImage.模板参考变量。在我们的组件中我们将使用ViewChild()装饰者可以访问本机元素。

最后,让我们来看看Herocomponent.

进口{零件Elementref.ondestroyoninit.viewchild.}'@ Angular / Core';进口{activatedRoute.}“@ Angular / Router”;进口{可观察到的}“rxjs /可观察”;进口{商店}“@ ngrx /商店”;进口{哥特罗GetMage.}“../ ....reducers”;进口{英雄}“../../models/hero”;进口{Loaderoaction.Loaderoimageaction.}“../heros.Actions”;进口{windowrefservice.}“../../core/services/window.service”;进口“RXJS / Add / Operator / Do”;进口“RXJS / Add / Operator / Filter”;进口“RXJS / Add / Operator / Share”;进口“RXJS / Add / Operator / TakeWhile”;@零件{TemplateURL.'./hero.component.html'样式堡垒['./hero.component.scs']}出口Herocomponent.实施ondestroyoninit.{上市英雄可观察到的<英雄>;@viewchild.“heroimage”图片Elementref.;私人的_窗口窗口;私人的=真正;构造函数私人的activatedRoute.activatedRoute.私人的商店商店<>私人的windowrefservice.windowrefservice.{}ngondestroy{这个=;}ngoninit.{这个_窗口=这个windowrefservice.本地窗德;这个英雄=这个activatedRoute.禁毒举行=>这个参数=>{这个商店调度Loaderoaction.{ID参数得到“ID”}}SwitchMap.=>这个商店选择哥特罗分享;const图片=这个英雄举行=>这个过滤英雄=>!!!!英雄英雄=>这个商店调度Loaderoimageaction.{英雄英雄}SwitchMap.=>这个商店选择GetMage.图片举行=>这个过滤图片=>!!!!图片订阅图片=>{这个图片母语SRC.=这个_窗口URL.createObjecturl.图片}}}

让我们打破这个:

  • 作为一个侧面笔记,我正在使用Ngrx商店为我的英雄以及我的形象。这是非常基本的,它使用先前版本的NGRX(2/3)。
  • 注意使用ViewChild()装饰者获得Elementref.到了元件。
  • 在这内ngoninit()生命周期挂钩我得到了英雄基于ID参数。
  • 一世调度()Loaderoimageaction.到商店。在我的ngrx效果中GetImage()调用方法her
  • 图片常数是一个可观察的从中返回GetImage()方法中的方法Heroservice()
  • 我那么订阅()到可观察。使用URL Web API,我们可以为此生成一个URL图片blob。
  • 最后,我们设置了价值SRC.blob的URL属性。

另外,请注意我正在使用windowrefservice.注入我的构造函数()功能。这是为了避免直接访问URL.浏览器全球可用的财产窗口目的。

URL Web API.

警告:使用该解决方案用于使用该解决方案显示图像百宝httpclient用来URL API.,这通常由所有现代浏览器支持。确保检查CANIUSE.com浏览器支持URL确保此解决方案适用于您的应用程序的用户。

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。