前言
essence-ng2-viewer 是一款供 Angular 开发者使用的 npm 包，它提供了一种轻量级的方式来展示图片、视频和 PDF 文档。本文将会详细讲解如何使用该 npm 包，同时也会通过示例代码和实际案例来展示其使用方法和指导意义。
安装
要使用 essence-ng2-viewer，我们需要先将其安装到我们的项目中。为此，我们需要在命令行中执行以下命令：
npm install essence-ng2-viewer
这个命令会从 npm 仓库中下载并安装 essence-ng2-viewer 包到我们的项目中。
使用
在安装好 essence-ng2-viewer 后，我们就可以在 Angular 组件中使用了。下面是一个最基本的使用例子：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------- ---------- - ---- --------------------- ------------ --------- ----------- --------- - ------------- ---------------------- ---- ----------- ------------- ------------------- -- --------------- ------------- ---------------------- ------ ----------- ------------- ------------------- --------- --------------- ------------- -------------------- ------ ----------- ------------- ------------------- -- --------------- -- -- ------ ----- ------------ - ----- ---------- - -------- --- - ---------------------------------- -------- ------------- - - -------- - ------- ----- -------- ----- ------ ----- ----------- ----- ------------ ----- -- -- -展开代码
这个代码片段会在页面中显示一张图片。我们同样可以展示视频和 PDF 文档。从代码片段中可以看到，我们可以通过在组件的 template 中使用 essence-viewer 指令来启用 essence-ng2-viewer。我们同时也可以传递一些选项，例如工具栏是否可用这类配置，以改变在浏览器中展示媒体的方式。
指南
如何在组件中使用 essence-ng2-viewer？
我们可以在我们任意需要展示图片、视频和 PDF 文档的组件中使用 essence-ng2-viewer。我们只需要在组件代码中导入 essence-ng2-viewer 并在该组件所属的 Angular 模块中声明即可开始使用。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------- ---------- - ---- --------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------- -- ------ ----- ------------ - ----- ---------- - -------- --- - ---------------------------------- -------- ------------- - - -------- - ------- ----- -------- ----- ------ ----- ----------- ----- ------------ ----- -- -- -展开代码
上面的代码中，我们从 essence-ng2-viewer 中导入 ViewerType 和 ViewerOptions 接口，并将它们声明在组件代码中。这样我们就可以在组件模板文件中使用。
如何显示不同类型的媒体？
在 essence-ng2-viewer 中，我们可以显示图片、视频和 PDF 文档。只需要在模板文件中选择合适的标签即可。
<img [src]="url" essenceViewer [options]="options" />
像这样的代码片段就可以显示一张图片。我们可以使用 video 或者是 embed 标签分别来显示视频和 PDF 文档。
如何配置 essence-ng2-viewer？
我们可以用选项对象 ViewerOptions 来配置 essence-ng2-viewer。例如，你可以禁用 toolbar，或仅给用户提供针对特定媒体类型的特定选项，如仅在 PDF 上提供旋转选项。
-- -------------------- ---- ------- -------- ------------- - - -------- - ------- ----- -------- ----- ------ ----- ----------- ----- ------------ ----- -- --展开代码
这段代码片段中的 options 变量设置了所有工具栏都可用，并提供了缩放、重置和旋转功能。
总结
在本篇文章中，我们学习了如何使用 npm 包 essence-ng2-viewer 来在 Angular 中显示图片、视频和 PDF 文档。我们还了解了如何在组件中使用 essence-ng2-viewer，以及如何配置 essence-ng2-viewer 以满足特定的用户需求。希望这篇文章对你在开发 Angular 应用程序中使用 essence-ng2-viewer 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e0692
