什么是 ng2-qrcode-reader
ng2-qrcode-reader 是一个 Angular 2+ 平台下的二维码扫描器 npm 包，使用摄像头来读取并解码二维码。该包基于 ZXing 解码库实现，支持多个二维码编码标准，例如 QRCode、DataMatrix 等。
安装与引用
首先，你需要在项目中安装 ng2-qrcode-reader，可以使用以下命令：
--- ------- ----------------- ------
下载完成之后，在你想要使用该包的组件中引用它，并在 NgModule 中声明：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ -- -- ----------------- ------ - ----------------- - ---- -------------------- ----------- -------- --------------- ------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
使用 ng2-qrcode-reader
使用 ng2-qrcode-reader 包来开发一个简单的二维码扫描应用。首先，在组件中使用 ngAfterViewInit 生命周期钩子绑定扫描器：
------ - ---------- ---------- ----------- ------------- - ---- ----------------
------ - ------------------ - ---- --------------------
------------
--------- -----------
--------- -
----------- --------
---------------
----------------------------
-----------------------------------
-------------
-------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------------- -
--------------------- - ------- ----- --
-------- -------------------
----------------- -------- - ----------- ---------------
------- -------
------------- - -
------------------ ---- -
-- --------
-------------------------
-
------------------ ------- -
----------- - -------
------------------------
-
-上面的代码中，我们首先使用 @ViewChild 装饰器获取到 QrScannerComponent 实例，同时定义了 availableFormats 格式数组，它包含我们想要扫描的二维码格式。在 ngAfterViewInit 生命周期钩子中，我们启动了扫描器。
在 HTML 模板中，我们向 QrScannerComponent 组件中传递了 3 个参数：
- debug：指示是否在控制台输出诊断信息（默认为 false）；
- formats：定义希望扫描的二维码格式；
- qrCodeFound：每当扫描器检测到二维码时调用的回调函数。
我们还定义了一个名为 updateText 的回调函数，该函数将扫描器扫描到的二维码文本保存在 result 变量中，停止扫描器以防止用户不断扫描二维码。
总结
现在你已经掌握了如何使用 ng2-qrcode-reader npm 包来实现一个基本的二维码扫描应用程序。不同于其他前端工具包，ng2-qrcode-reader 提供了一个简单、直观的界面，且易于使用，也更加侧重于 Angular 应用程序。该包可用于大多数基于 Angular 的项目。如果你遇到了任何问题，可以直接访问官方文档进行咨询。在开发中，使用这些工具让我们的代码变得更加简单易懂，也更容易实现代码重用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056c7a81e8991b448e5f8f